Selection Signifier

Overview (v1)

Source: ./src/components/selection-signifier/v1/Overview.mdx

Selection Signifier

The selection signifier component indicates that a component can be selected (e.g. selection-tile). Visit the selection tile demo for more information about the component's use case. It does not have any specific action associated with it, but it is a visual cue to the user that they can perform a selection on the component.

The color of the icon as well as its variant can not be changed.

Default variation

Story Demo: Single Selection:

<style>
  .selection-tile {
    width: 328px;
  }

  .wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .headline-wrapper {
    display: flex;
    gap: 16px;
  }

  div {
    text-align: left;
  }
</style>

<!-- Radio -->
<oc-selection-tile-v2 class="selection-tile" variant="text">
  <input type="radio" aria-label="oc-auto" />
  <div slot="content">
    <div class="headline-wrapper">
      <oc-selection-signifier-v1></oc-selection-signifier-v1>
      <div class="oc-copy-100 oc-copy--bold">Headline</div>
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra
      tincidunt.
    </div>
  </div>
</oc-selection-tile-v2>

Configuration

The component itself cannot be configured, it reflects the state of the selectable parent (in this case, the selection tile).

Usage guidelines

Before integrating the selection signifier component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Variations (v1)

Source: ./src/components/selection-signifier/v1/Variations.mdx

Variations

Listed below are the 2 variations of the selection signifier component. They reflect the different states of the selection tile, which is the parent component of the selection signifier.

Demo: Single Selection

Story: components-selection-signifier-variations--selection-signifier-inside-selection-tile-1 · tags: components, selection-signifier, v1, variations

The selection signifier inside a selection tile - mode: radio/single-selection.

<style>
  .selection-tile {
    width: 328px;
  }

  .wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .headline-wrapper {
    display: flex;
    gap: 16px;
  }

  div {
    text-align: left;
  }
</style>

<!-- Radio -->
<oc-selection-tile-v2 class="selection-tile" variant="text">
  <input type="radio" aria-label="oc-auto" />
  <div slot="content">
    <div class="headline-wrapper">
      <oc-selection-signifier-v1></oc-selection-signifier-v1>
      <div class="oc-copy-100 oc-copy--bold">Headline</div>
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra
      tincidunt.
    </div>
  </div>
</oc-selection-tile-v2>

{
  name: "Demo: Single Selection",
  render() {
    return html`
      <style>
        .selection-tile {
          width: 328px;
        }

        .wrapper {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
        }

        .headline-wrapper {
          display: flex;
          gap: 16px;
        }

        div {
          text-align: left;
        }
      </style>

      <!-- Radio -->
      <oc-selection-tile-v2 class="selection-tile" variant="text">
        <input type="radio" aria-label="oc-auto" />
        <div slot="content">
          <div class="headline-wrapper">
            <oc-selection-signifier-v1></oc-selection-signifier-v1>
            <div class="oc-copy-100 oc-copy--bold">Headline</div>
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra
            tincidunt.
          </div>
        </div>
      </oc-selection-tile-v2>
    `;
  }
}

Demo: Multi Selection

Story: components-selection-signifier-variations--selection-signifier-inside-selection-tile-2 · tags: components, selection-signifier, v1, variations

The selection signifier inside a selection tile - mode: checkbox/multi-selection.

<style>
  .selection-tile {
    width: 328px;
  }

  .wrapper {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .headline-wrapper {
    display: flex;
    gap: 16px;
  }

  div {
    text-align: left;
  }
</style>

<!-- Radio -->
<oc-selection-tile-v2 class="selection-tile" variant="text">
  <input type="checkbox" aria-label="oc-auto" />
  <div slot="content">
    <div class="headline-wrapper">
      <oc-selection-signifier-v1></oc-selection-signifier-v1>
      <div class="oc-copy-100 oc-copy--bold">Headline</div>
    </div>
    <div>
      Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra
      tincidunt.
    </div>
  </div>
</oc-selection-tile-v2>

{
  name: "Demo: Multi Selection",
  render() {
    return html`
      <style>
        .selection-tile {
          width: 328px;
        }

        .wrapper {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
        }

        .headline-wrapper {
          display: flex;
          gap: 16px;
        }

        div {
          text-align: left;
        }
      </style>

      <!-- Radio -->
      <oc-selection-tile-v2 class="selection-tile" variant="text">
        <input type="checkbox" aria-label="oc-auto" />
        <div slot="content">
          <div class="headline-wrapper">
            <oc-selection-signifier-v1></oc-selection-signifier-v1>
            <div class="oc-copy-100 oc-copy--bold">Headline</div>
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur. Senectus odio pellentesque eget bibendum viverra
            tincidunt.
          </div>
        </div>
      </oc-selection-tile-v2>
    `;
  }
}