Components

List

Headline
Supporting text
100+

<li>
The list item.
.ui-start
Optional content at the start, such as an icon or avatar.
.ui-text
The text content.
<p>
The headline, the first paragraph.
<p>
Supporting text, the second paragraph.
.ui-end
Optional content at the end, such as a value or an action.

Headline
Headline

Supporting text that truly is quite long enough to fill up multiple lines.
Trailing supporting text

100+
Trailing keyboard command

CTRL+Shift+X
Headline with start icon
Headline with start icon

Supporting text that truly is quite long enough to fill up multiple lines.
Inset class

Makes the text line up nicely
Link list item
OP

Headline
Headline

Supporting text
Link with start icon
End icon button
Checkbox
Radio 1
Radio 2
Switch 1

HTML

<ul class="ui-list">
  <li>
    <div class="ui-text">
      <p>Headline</p>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Headline</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Trailing supporting text</p>
    </div>
    <div class="ui-end">100+</div>
  </li>
  <li>
    <div class="ui-text">
      <p>Trailing keyboard command</p>
    </div>
    <div class="ui-end">
      <kbd>CTRL+Shift+X</kbd>
    </div>
  </li>
  <li class="ui-border-top">
    <div class="ui-start">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path>
      </svg>
    </div>
    <div class="ui-text">
      <p>Headline with start icon</p>
    </div>
  </li>
  <li>
    <div class="ui-start">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path>
      </svg>
    </div>
    <div class="ui-text">
      <p>Headline with start icon</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
    </div>
  </li>
  <li class="ui-inset">
    <div class="ui-text">
      <p>Inset class</p>
      <p>Makes the text line up nicely</p>
    </div>
  </li>
  <li class="ui-border-top">
    <button>
      <div class="ui-text">
        <p>Button list item</p>
      </div>
    </button>
  </li>
  <li>
    <a href="#">
      <div class="ui-text">
        <p>Link list item</p>
      </div>
    </a>
  </li>
  <li class="ui-border-top">
    <div class="ui-start">
      <div class="ui-avatar">OP</div>
    </div>
    <div class="ui-text">
      <p>Headline</p>
    </div>
  </li>
  <li>
    <div class="ui-start">
      <div class="ui-avatar">
        <img
          src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?q=80&w=1827&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
          decoding="async"
          loading="lazy"
        />
      </div>
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
  </li>
  <li class="ui-border-top">
    <button>
      <div class="ui-start">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 28 28"
        >
          <path
            fill="currentColor"
            d="M21.75 3A3.25 3.25 0 0 1 25 6.25v15.5A3.25 3.25 0 0 1 21.75 25H6.25A3.25 3.25 0 0 1 3 21.75V6.25A3.25 3.25 0 0 1 6.25 3zm0 1.5H6.25A1.75 1.75 0 0 0 4.5 6.25V15h6a.75.75 0 0 1 .743.648l.007.102a2.75 2.75 0 1 0 5.5 0a.75.75 0 0 1 .648-.743L17.5 15h6V6.25a1.75 1.75 0 0 0-1.75-1.75"
          ></path>
        </svg>
      </div>
      <div class="ui-text">
        <p>Button with start icon</p>
      </div>
    </button>
  </li>
  <li>
    <a href="#">
      <div class="ui-start">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 24 24"
        >
          <path
            fill="currentColor"
            d="m13.94 5l5.061 5.06L9.063 20a2.25 2.25 0 0 1-1 .58l-5.115 1.395a.75.75 0 0 1-.92-.921l1.394-5.116a2.25 2.25 0 0 1 .58-.999zm-7.414 6l-1.5 1.5H2.75a.75.75 0 0 1 0-1.5zm14.352-8.174l.153.144l.145.153a3.58 3.58 0 0 1-.145 4.908l-.97.969L15 3.94l.97-.97a3.58 3.58 0 0 1 4.908-.144M10.526 7l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5zm4-4l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5z"
          ></path>
        </svg>
      </div>
      <div class="ui-text">
        <p>Link with start icon</p>
      </div>
    </a>
  </li>
  <li class="ui-border-top">
    <button>
      <div class="ui-text">
        <p>End icon</p>
      </div>
      <div class="ui-end">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M11.116 26.634a1.25 1.25 0 0 1 0-1.768L19.982 16l-8.866-8.866a1.25 1.25 0 0 1 1.768-1.768l9.75 9.75a1.25 1.25 0 0 1 0 1.768l-9.75 9.75a1.25 1.25 0 0 1-1.768 0"
          ></path>
        </svg>
      </div>
    </button>
  </li>
  <li>
    <div class="ui-text">
      <p>End icon button</p>
    </div>
    <div class="ui-end">
      <button class="ui-icon-button">
        <span class="ui-sr-only">More</span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M16 9.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5m0 9a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5M13.5 25a2.5 2.5 0 1 0 5 0a2.5 2.5 0 0 0-5 0"
          ></path>
        </svg>
      </button>
    </div>
  </li>
  <li class="ui-border-top">
    <label class="ui-checkbox" for="checkbox-all-html">
      <div class="ui-text">Checkbox</div>
      <div class="ui-end">
        <input type="checkbox" id="checkbox-all-html" />
      </div>
    </label>
  </li>
  <li class="ui-border-top">
    <label class="ui-radio" for="radio-all-1-html">
      <div class="ui-text">Radio 1</div>
      <div class="ui-end">
        <input
          type="radio"
          id="radio-all-1-html"
          value="1"
          name="default-radio-group-all"
        />
      </div>
    </label>
  </li>
  <li>
    <label class="ui-radio" for="radio-all-2-html">
      <div class="ui-text">Radio 2</div>
      <div class="ui-end">
        <input
          type="radio"
          id="radio-all-2-html"
          value="2"
          name="default-radio-group-all"
        />
      </div>
    </label>
  </li>
  <li class="ui-border-top">
    <label class="ui-switch" for="switch-all-1-html">
      <div class="ui-text">Switch 1</div>
      <div class="ui-end">
        <input type="checkbox" role="switch" id="switch-all-1-html" />
      </div>
    </label>
  </li>
</ul>

Configurations

A List item is split up in three parts:

.ui-text: main content
.ui-start (optional): items before the main content
.ui-end (optional): items after the main content

With great power...

The List component is extremely flexible and versatile. Be careful if you start creating new configurations on your own. Maybe an existing one can solve your problem, but in another way?

Variants

Use.ui-default, .ui-tonal, and .ui-transparent to change the background color.

Filled as default?!

Yeah it's a bit weird, but normally you would use a list in a popover/select scenario that needs to contrast against the background. If nothing else, just change it yourself.

Filled (default)
Second item

Default
Second item

Tonal
Second item

Transparent
Second item

HTML

<div class="column" style="gap: var(--size-4)">
  <ul class="ui-list">
    <li>
      <div class="ui-text">
        <p>Filled (default)</p>
      </div>
    </li>
    <li>
      <div class="ui-text">
        <p>Second item</p>
      </div>
    </li>
  </ul>

  <ul class="ui-list ui-default">
    <li>
      <div class="ui-text">
        <p>Default</p>
      </div>
    </li>
    <li>
      <div class="ui-text">
        <p>Second item</p>
      </div>
    </li>
  </ul>

  <ul class="ui-list ui-tonal">
    <li>
      <div class="ui-text">
        <p>Tonal</p>
      </div>
    </li>
    <li>
      <div class="ui-text">
        <p>Second item</p>
      </div>
    </li>
  </ul>

  <ul class="ui-list ui-transparent">
    <li>
      <div class="ui-text">
        <p>Transparent</p>
      </div>
    </li>
    <li>
      <div class="ui-text">
        <p>Second item</p>
      </div>
    </li>
  </ul>
</div>

Clickable list item

Wrap the elements of your List item with a a, buttonor label depending on use-case.

Link list item
Checkbox list item

HTML

<ul class="ui-list">
  <li>
    <button>
      <div class="ui-text">
        <p>Button list item</p>
      </div>
    </button>
  </li>
  <li>
    <a href="#clickable-list-item">
      <div class="ui-text">
        <p>Link list item</p>
      </div>
    </a>
  </li>
  <li>
    <label class="ui-checkbox" for="clickable-checkbox-html">
      <div class="ui-text">
        <p>Checkbox list item</p>
      </div>
      <div class="ui-end">
        <input type="checkbox" id="clickable-checkbox-html" />
      </div>
    </label>
  </li>
</ul>

Selected item

Add aria-selected="true" to the li.

HTML

<ul class="ui-list">
  <li aria-selected="true">
    <a href="#">
      <div class="ui-text">
        <p>Selected item</p>
        <p>This item has aria-selected="true" applied to the ListItem</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="ui-text">
        <p>Normal item</p>
      </div>
    </a>
  </li>
</ul>

Text

Main text lives in div.ui-text.

Headline
Headline

Supporting text that truly is quite long enough to fill up multiple lines.
Headline

Supporting text

Even more supporting text

HTML

<ul class="ui-list">
  <li>
    <div class="ui-text">
      <p>Headline</p>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Headline</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
      <p>Even more supporting text</p>
    </div>
  </li>
</ul>

Start items

Found in div.ui-start.

Icon

Headline
Headline

Supporting text

HTML

<ul class="ui-list">
  <li>
    <div class="ui-start">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path>
      </svg>
    </div>
    <div class="ui-text">
      <p>Headline</p>
    </div>
  </li>
  <li>
    <div class="ui-start">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path>
      </svg>
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
  </li>
</ul>

Avatar

Image

Headline

Supporting text
Headline

Supporting text

HTML

<ul class="ui-list">
  <li>
    <div class="ui-start">
      <img
        src="https://images.unsplash.com/photo-1504579264001-833438f93df2?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt=""
        decoding="async"
        loading="lazy"
      />
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
  </li>
  <li>
    <div class="ui-start">
      <img
        src="https://images.unsplash.com/photo-1504579264001-833438f93df2?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt=""
        decoding="async"
        loading="lazy"
      />
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
  </li>
</ul>

Video

Headline

Supporting text

13:37
Headline

Supporting text

90s

HTML

<ul class="ui-list">
  <li>
    <div class="ui-start">
      <video controls muted>
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
          type="video/mp4"
        />
      </video>
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
    <div class="ui-end">13:37</div>
  </li>
  <li>
    <div class="ui-start">
      <video controls muted>
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
          type="video/mp4"
        />
      </video>
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
    <div class="ui-end">90s</div>
  </li>
</ul>

End items

Found in div.ui-end.

Text

Headline

30kB
Headline

Supporting text

99%
Headline

Supporting text that truly is quite long enough to fill up multiple lines.

100+

HTML

<ul class="ui-list">
  <li>
    <div class="ui-text">
      <p>Headline</p>
    </div>
    <div class="ui-end">30kB</div>
  </li>
  <li>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
    <div class="ui-end">99%</div>
  </li>
  <li>
    <div class="ui-text">
      <p>Headline</p>
      <p>
        Supporting text that truly is quite long enough to fill up multiple
        lines.
      </p>
    </div>
    <div class="ui-end">100+</div>
  </li>
</ul>

Keyboard command

Save all

CTRL+ALT+DEL
Save

CTRL+S

HTML

<ul class="ui-list">
  <li>
    <div class="ui-text">
      <p>Save all</p>
    </div>
    <div class="ui-end">
      <kbd>CTRL+ALT+DEL</kbd>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Save</p>
    </div>
    <div class="ui-end">
      <kbd>CTRL+S</kbd>
    </div>
  </li>
</ul>

Checkbox

Wrap the List item content with a <label class="ui-checkbox" for="INPUTID">to make the entire surface clickable.

Radio

Wrap the List item content with a <label class="ui-radio" for="INPUTID">to make the entire surface clickable.

Radio group: Add a common name to each <input> for radio group behavior.

Switch

Inset

Enables a list item without a start icon to align with items that do.

No inset
Inset class

Makes the text line up nicely
Hidden

Inset class

Any div.ui-start will be hidden when inset

HTML

<ul class="ui-list">
  <li>
    <div class="ui-start">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path>
      </svg>
    </div>
    <div class="ui-text">
      <p>No inset</p>
    </div>
  </li>
  <li class="ui-inset">
    <div class="ui-text">
      <p>Inset class</p>
      <p>Makes the text line up nicely</p>
    </div>
  </li>
  <li class="ui-inset">
    <div class="ui-start">Hidden</div>
    <div class="ui-text">
      <p>Inset class</p>
      <p>Any <code>div.ui-start</code> will be hidden when inset</p>
    </div>
  </li>
</ul>

Gutterless

Apply the .ui-gutterless class on the ul.ui-list element to remove the inline padding on the list items.

Gutterless list item
Headline

Supporting text

100+

HTML

<ul class="ui-list ui-gutterless">
  <li>
    <div class="ui-text">
      <p>Gutterless list item</p>
    </div>
    <div class="ui-end">
      <button class="ui-icon-button" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path
            fill="currentColor"
            d="M12 12h2v12h-2zm6 0h2v12h-2zM6 28h20V10H6zm16-22V4H10v2H4v2h24V6zM12 4h8v2h-8z"
          ></path>
        </svg>
      </button>
    </div>
  </li>
  <li>
    <div class="ui-start">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          fill="currentColor"
          d="M16 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m-8.5 2A3.5 3.5 0 0 0 4 21.5v.5c0 2.393 1.523 4.417 3.685 5.793C9.859 29.177 12.802 30 16 30s6.14-.823 8.315-2.207C26.477 26.417 28 24.393 28 22v-.5a3.5 3.5 0 0 0-3.5-3.5z"
        ></path>
      </svg>
    </div>
    <div class="ui-text">
      <p>Headline</p>
      <p>Supporting text</p>
    </div>
    <div class="ui-end">100+</div>
  </li>
</ul>

Borders

On every item

Apply the .ui-bordered class on the ul.ui-list element to give all list items a border.

So
Many
Borders

HTML

<ul class="ui-list ui-bordered">
  <li>
    <div class="ui-text">
      <p>So</p>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Many</p>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Borders</p>
    </div>
  </li>
</ul>

On one item

Apply the .ui-border-top class on a li item to give it an upper border.

I need borders
Help
Thanks

HTML

<ul class="ui-list">
  <li>
    <div class="ui-text">
      <p>I need borders</p>
    </div>
  </li>
  <li>
    <div class="ui-text">
      <p>Help</p>
    </div>
  </li>
  <li class="ui-border-top">
    <div class="ui-text">
      <p>Thanks</p>
    </div>
  </li>
</ul>

Dense

Just add the .ui-dense class to the ul.ui-list!

.ui-dense

Headline
Headline

Supporting text that truly is quite long enough to fill up multiple lines.
Trailing supporting text

100+
Trailing keyboard command

CTRL+Shift+X
Headline with start icon
Headline with start icon

Supporting text that truly is quite long enough to fill up multiple lines.
Inset class

Makes the text line up nicely
Link list item
OP

Headline
Headline

Supporting text
Link with start icon
End icon button
Checkbox
Radio 1
Radio 2
Switch 1

HTML

<ul class="ui-list ui-dense">
  <!--  -->
</ul>

API

List API

Type	Modifiers	Default	Description
Bordered	`.ui-bordered`	-	Adds a border between list items.
Dense	`.ui-dense`	-	Packs the list tighter.
Gutterless	`.ui-gutterless`	-	Removes the inline padding.
Variants	`.ui-default`, `.ui-tonal`, `.ui-transparent`	-	The background color variant.

Parts

Part	Description
`ul.ui-list`	Container element.
`<li>`	A list item.

List item API

Type	Modifiers	Default	Description
Border top	`.ui-border-top`	-	Adds a border above the item.
Controls	default, `label.ui-checkbox`, `label.ui-radio`, `label.ui-switch`	-	Wraps the content in a `<label>` for a checkbox, radio or switch.
Inset	`.ui-inset`	-	Aligns the text with items that have start content.

Parts

Part	Description
`<li>`	The list item.
`.ui-start`	Optional content at the start, such as an icon or avatar.
`.ui-text`	The text content.
`<p>`	The headline, the first paragraph.
`<p>`	Supporting text, the second paragraph.
`.ui-end`	Optional content at the end, such as a value or an action.

Wrap the content in an <a>, <button> or <label> to make the item interactive.

Browser support

See also the full browser support guide.

Installation

list.css

@layer components.extended {
  /*
Lists meant to be used stand-alone or as part of Select elements

  Intended use-case:
  - ul.ui-list > li
  - .ui-select > .ui-list > option
*/
  :where(.ui-list) {
    --_bg-color: var(--surface-filled);
    --_bg-color-hover: oklch(from var(--primary) l c h / 15%);

    background-color: var(--_bg-color);
    color: var(--text-primary);
    list-style: none;
    padding: var(--size-2) 0;

    @media (pointer: coarse) {
      &,
      * {
        user-select: none;
      }
    }

    /* Background color */
    &.ui-transparent {
      --_bg-color: transparent;
    }

    &.ui-default {
      --_bg-color: var(--surface-default);
    }

    &.ui-tonal {
      --_bg-color: var(--surface-tonal);
    }

    /* Borders on all list items */
    &.ui-bordered {
      :where(li + li, option + option) {
        margin-block-start: var(--size-3);

        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
          visibility: visible;
          /* override select > option:before style */
        }
      }
    }

    /* Dense - less gaps and spacing */
    &.ui-dense {
      :where(li, option) {
        gap: var(--size-2);
        min-block-size: var(--size-7);
        padding: var(--size-1) var(--size-2);

        &.ui-border-top {
          margin-block-start: var(--size-2);

          &::before {
            inset: calc(-1 * var(--size-1)) 0 auto 0;
          }
        }

        /* Clickable list item */
        &:has(> a, > button, > label) {
          min-block-size: auto;
          padding: 0;
        }

        & > :where(a, button, label) {
          gap: var(--size-2);
          min-block-size: var(--size-7);
          padding: var(--size-1) var(--size-2);
        }

        /* Checkbox / Radio */
        & > label {
          .ui-end {
            padding-inline-end: 0.125rem;
          }

          &:where(.ui-checkbox, .ui-radio) {
            --_input-size: var(--size-3);
          }
        }

        /* Leading and trailing content */
        .ui-start,
        .ui-end {
          .ui-avatar {
            max-inline-size: var(--size-6);
          }

          .ui-icon-button,
          svg {
            max-inline-size: var(--size-4);
          }

          .ui-checkbox,
          .ui-radio {
            --_input-size: var(--size-3);
          }
        }
      }
    }

    /* Gutterless */
    &.ui-gutterless {
      :where(li, option) {
        padding-inline: 0;

        & > :where(a, button, label) {
          padding-inline: 0;
        }
      }
    }

    /* List item */
    :where(li, option, [role="group"] > label) {
      align-items: center;
      background-color: var(--_bg-color);
      display: flex;
      font-size: var(--font-size-05);
      gap: var(--size-3);
      isolation: isolate;
      min-block-size: 40px;
      padding: var(--size-2) var(--size-3);
      position: relative;

      &::before {
        display: none;
        /* removing checkmark from option */
      }

      * {
        font-size: inherit;
      }

      /* Clickable list item */
      &:has(> a, > button, > label) {
        background: transparent;
        display: block;
        min-block-size: auto;
        padding: 0;

        &[aria-selected="true"] > :where(a, button, label),
        &[aria-selected="true"],
        &:has(> [aria-current="page"]) > :where(a, button, label) {
          background-color: var(--_bg-color-hover);
        }
      }

      /* Select option */
      &:where(option) {
        align-items: center;
        background-color: var(--_bg-color);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

        &:hover {
          background-color: var(--_bg-color-hover);
        }

        &[aria-selected="true"] {
          background-color: var(--_bg-color-hover);
          color: var(--primary);
        }

        &:checked {
          background-color: oklch(from var(--primary) l c h / 30%);
        }
      }

      & > a,
      & > button,
      & > label {
        align-items: center;
        background-color: var(--_bg-color);
        color: inherit;
        cursor: pointer;
        display: flex;
        gap: var(--size-3);
        inline-size: 100%;
        margin: 0;
        min-block-size: 40px;
        outline-offset: -3px;
        padding: var(--size-2) var(--size-3);
        text-align: start;
        text-decoration: none;
        z-index: 0;

        &:hover {
          background-color: var(--_bg-color-hover);
        }

        &[aria-selected="true"],
        &[aria-current="page"] {
          background-color: var(--_bg-color-hover);
        }
      }

      /* Checkbox / Radio / Switch */
      & > label {
        &:where(.ui-checkbox, .ui-radio, .ui-switch) {
          display: flex;
        }

        .ui-end {
          padding-inline-end: var(--size-1);
        }

        &:where(.ui-checkbox, .ui-radio) {
          inline-size: 100%;
        }

        /* Switches look comically big in lists, so it's better to use a smaller variant  */
        &.ui-switch {
          --_dot-size: 0.75rem;
          --_track-height: var(--size-4);
          --_track-width: 2.5rem;
        }
      }

      /* Video */
      &:has(video) {
        padding: 0.75rem var(--size-3) 0.75rem 0;
      }

      /* Border between list items */
      &.ui-border-top {
        margin-block-start: var(--size-3);

        &::before {
          block-size: 1px;
          border-block-start: 1px solid var(--border-color);
          content: "";
          display: block;
          inline-size: 100%;
          inset: calc(-1 * var(--size-2)) 0 auto 0;
          position: absolute;
        }
      }

      /* Text */
      .ui-text {
        flex: 1;
        line-height: 1.6;

        :where(h1, h2, h3, h4, h5, h6, p, span) {
          color: inherit;
          font-weight: 400;
        }

        p + p {
          color: var(--text-muted);
          font-size: var(--font-size-0);
        }
      }

      /* Leading content */
      .ui-start {
        align-items: center;
        align-self: center;
        display: grid;
        z-index: 1;

        &:has(svg) {
          max-inline-size: var(--size-5);
        }

        svg {
          padding-block-start: 0.125rem;
        }

        img {
          aspect-ratio: 1;
          inline-size: 56px;
          object-fit: cover;
        }

        video {
          aspect-ratio: 16/9;
          block-size: 64px;
          object-fit: cover;
        }
      }

      /* Trailing content */
      .ui-end {
        align-items: center;
        display: flex;
        font-size: var(--font-size-0);
        text-align: end;
        z-index: 1;

        &:not(:has(a, button, input)) {
          pointer-events: none;
        }

        kbd {
          background-color: transparent;
          border: 0;
          color: inherit;
          opacity: 0.6;
        }

        svg {
          inline-size: 100%;
          max-inline-size: var(--size-5);
        }
      }

      /* Inset */
      &.ui-inset {
        .ui-text {
          padding-inline-start: calc(var(--size-5) + var(--size-3));
        }

        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
        .ui-start {
          display: none;
        }
      }
    }
  }
}

List

Anatomy

Configurations

With great power...

Variants

Filled as default?!

Clickable list item

Selected item

Text

Start items

Icon

Avatar

Image

Video

End items

Text

Keyboard command

Checkbox

Radio

Switch

Inset

Gutterless

Borders

On every item

On one item

Dense

API

List API

Parts

List item API

Parts

Browser support

Installation