Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Select

Select

Non-editable selection control and popup options.

Anatomy

  • 1 .select-root Select state and composition boundary.
  • 2 .select-label Accessible control label.
  • 3 .select-trigger Button displaying the selected value.
  • 4 .select-value-text Selected value or placeholder.
  • 5 .select-indicator Popup state icon.
  • 6 .select-positioner Anchored popup positioning layer.
  • 7 .select-content Popup listbox surface. Matches the trigger width unless the consumer sets the Etesie extension --et-menu-min-inline-size.
  • 8 .select-item-group Semantic option group.
  • 9 .select-item-group-label Label for a group of options.
  • 10 .select-item One selectable option.
  • 11 .select-item-text Primary option label.
  • 12 .select-item-indicator Selected option marker.

Variants

  • Filled
  • Outlined

Slots

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

Default
Font preview

When to use

Use a select when people must choose one value from a fixed list and the options can stay collapsed until needed.