Select
Pick one option from a list. A native <select>: the list is styled where the browser supports it, and touch devices keep their own picker. Specification: docs/components/select.md.
The selects on this page stand alone, so each is named with aria-label. With a visible label, a select is part of a Field. To search the options, or pick several, use a Combobox.
Size
data-size on the box or any container. Each row: the placeholder, a chosen option, and a list with groups and a separator. Click a box to open its list.
sm
md
lg
Without data-size
Placeholder
A first option with an empty value shows as the placeholder. Add hidden to keep it out of the list, and required on the select so it can't be submitted empty.
Options
Options can hold an icon or an avatar before the label, and a description after it. Keep a space between the parts: the native picker shows the plain text. <button><selectedcontent></selectedcontent></button> as the first child shows the chosen option's icon or avatar in the closed box too.
Icons and avatars
Descriptions, groups and a disabled option
Group with <optgroup label>; separate with <hr>. Disabled options stay in the list but can't be picked. The closed box shows only the label.
A destructive option
data-intent="danger" on an option that destroys something.
Box
Leading icon
Clear button
A canon-button with command="--canon-clear" and commandfor the select, after the select, goes back to the placeholder. It hides while there is nothing to clear; this theme also shows it only while the box is hovered or focused (always on touch screens), keeping its space so nothing moves. Point at the box below, or tab to it, to see the button appear before the arrow.
States
Error is aria-invalid="true" on the select; warning and success are data-intent on the box (in a Field, its message sets them). Disabled is native.
Edge cases
Right-to-left
Long options in a narrow box
The closed box cuts the value short; the list grows to fit its options, up to the window.