List

Caution

Status: Alpha (learn more)

Select List

<ul class="tng-list with-divider" role="listbox">
  <li class="tng-list-option tng-focus-within" role="option">
    <i aria-hidden="true" class="tng-icon icon-star is-md"></i>
    <span class="flex-grow-1 pb-lg | tng-text-body">Option 1</span>
    <button class="mie-xs | tng-icon-button is-neutral">
      <i aria-hidden="true" class="tng-icon icon-chevron-right is-sm"></i>
    </button>
  </li>
  <li
    class="tng-list-option tng-focus-within"
    aria-selected="true"
    role="option"
  >
    <i aria-hidden="true" class="tng-icon icon-star is-md"></i>
    <span class="flex-grow-1 pb-lg | tng-text-body">Option 2</span>
    <button class="mie-xs | tng-icon-button is-neutral">
      <i aria-hidden="true" class="tng-icon icon-check is-sm"></i>
    </button>
  </li>
  <li class="tng-list-option tng-focus-within" role="option">
    <i aria-hidden="true" class="tng-icon icon-star is-md"></i>
    <span class="flex-grow-1 pb-lg | tng-text-body">Option 3</span>
    <button class="mie-xs | tng-icon-button is-neutral">
      <i aria-hidden="true" class="tng-icon icon-chevron-right is-sm"></i>
    </button>
  </li>
</ul>

• Option 1
• Option 2
• Option 3

Accessibility

If your select list is a multi-select make sure to set the aria-multiselectable="true" attribute on the listbox container.

<ul class="tng-list" role="listbox" aria-multiselectable="true"></ul>

Recipes

Checkbox List

<div class="tng-overflow-scroll" style="max-block-size: 150px">
  <div class="tng-list m-sm">
    <div class="tng-list-option pb-sm pi-md | tng-focus-within">
      <label class="tng-checkbox-control">
        <input type="checkbox" />
        Option 1
      </label>
    </div>
    <div class="tng-list-option pb-sm pi-md | tng-focus-within">
      <label class="tng-checkbox-control">
        <input type="checkbox" />
        Option 2
      </label>
    </div>
    <div class="tng-list-option pb-sm pi-md | tng-focus-within">
      <label class="tng-checkbox-control">
        <input type="checkbox" />
        Option 3
      </label>
    </div>
    <div class="tng-list-option pb-sm pi-md | tng-focus-within">
      <label class="tng-checkbox-control">
        <input type="checkbox" />
        Option 4
      </label>
    </div>
    <div class="tng-list-option pb-sm pi-md | tng-focus-within">
      <label class="tng-checkbox-control">
        <input type="checkbox" />
        Option 5
      </label>
    </div>
    <div class="tng-list-option pb-sm pi-md | tng-focus-within">
      <label class="tng-checkbox-control">
        <input type="checkbox" checked />
        Option 6
      </label>
    </div>
  </div>
</div>
<div class="tng-surface p-md | tng-group justify-content-end gap-xl">
  <button class="tng-button is-tertiary">Clear All</button>
  <button class="tng-button is-primary">Show x results</button>
</div>

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Clear All Show x results

Plain List

<ol class="tng-plain-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    Nested ordered list
    <ol>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ol>
  </li>
  <li>
    Nested unordered list
    <ul>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ul>
  </li>
</ol>

1. List item 1
2. List item 2
3. Nested ordered list
   1. Nested list item 1
   2. Nested list item 2
4. Nested unordered list
   • Nested list item 1
   • Nested list item 2

<ul class="tng-plain-list">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>
    Nested ordered list
    <ol>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ol>
  </li>
  <li>
    Nested unordered list
    <ul>
      <li>Nested list item 1</li>
      <li>Nested list item 2</li>
    </ul>
  </li>
</ul>

• List item 1
• List item 2
• Nested ordered list
  1. Nested list item 1
  2. Nested list item 2
• Nested unordered list
  • Nested list item 1
  • Nested list item 2