Components · Listbox

Listbox

Always-visible option list where the choices stay on screen and one of them is the current value. Reach for the select when the choice should collapse into a trigger, the connected button group when the options are actions rather than a value, and tabs when the choice switches views.

Anatomy

1 .listbox-root Label and option-list boundary.
2 .listbox-label Accessible list label, shown above the options.
3 .listbox-content The option list itself. Paints nothing: the options are the surface.
4 .listbox-item-group Semantic option group.
5 .listbox-item-group-label Label for a group of options.
6 .listbox-item One selectable option.
7 .listbox-item-content Etesie extension: stacks an option label over its supporting line. Material documents a list item with supporting text but names no part for the pair, and every caller that composed the column itself produced a different gap.
8 .listbox-item-text Primary option label.
9 .listbox-item-description Etesie extension: the supporting line under an option label, inside item-content.
10 .listbox-item-indicator Selected option marker.

Slots

What the component can hold. Every other combination — emphasis, size, shape — is a configuration; pick those in Use.

Role

Default

What's the text's job?

With description

When to use

Use a listbox when a set of choices should remain visible so people can compare options before selecting.