Select

A trigger on a rule that opens a layer of options.

Forms shadcn: Select

Sort by

States

Closed

aria-expanded="false"

The value on its rule, the chevron in a resting cell.
Focused

:focus-visible

The rule develops in --state, as in every field.
Open

aria-expanded="true"

A framed layer of options; the chosen one is a --state fill; the cell breathes.
Disabled

disabled

A hairline, muted text, the cell’s ring at half strength.

Trigger	the chosen value in Basier 16/24 on a 40px field and its ink rule
Cell	a chevron in an icon cell at the rule’s end; open, it is switched on and breathes
Layer	paper and a 1px --ink frame, half a module under the field, padded half a module at the sides
Options	two modules tall, the clean cut at 16/24, on --border hairlines
Current	the chosen option is a --state fill running to the frame
Hover	an option turns --state and its hairline develops from the pointer
Opening	the menu burn from where it was pressed, 300ms; reduced motion cuts
Keys	Arrow keys open it and move through it, Enter chooses, Escape closes

The one framed surface

Frames are off everywhere except layers. The list is a sheet laid over the page, so it keeps a 1px ink frame to have an edge against what is behind it.
Current is a fill

The chosen option is a --state fill, as the current section is in the site menu: red as the current state, never as decoration.
It burns open

The layer opens and closes with the menu burn, the cascade at the scale of a popover, from where it was pressed, like the site’s menus.
Native where it will do

Where a custom list is not needed, the native select sits inside the same field and rule, so the platform’s own picker opens.