Select control
The bare control — use when you need a select without the label wrapper. Displays a placeholder until a value is chosen; shows a check mark next to the selected option in the dropdown.
Empty
With value
sm size
SelectField
Composes the Select control with a label, optional helper text, and error state. Use SelectField in forms; use Select for standalone controls in toolbars or filter bars.
Default
Owners cannot be assigned through this form.
Error
A component is required to generate the report.
Disabled
States
DefaultResting state. border/subtle border, placeholder in text/subtle.Focusedaction/primary 2px border. Indicates keyboard or mouse focus on the trigger.OpenSame as focused. Chevron rotates 180°. Dropdown panel appears.SelectedChosen value shown in text/base. Check mark on the active option in the dropdown.Errorstatus/error 2px border. Error message shown below in status/error.Disabledbg/disabled background, text/disabled text. Not interactive.Option hoverbg/faint highlight on the hovered or arrow-key-focused option row.Keyboard & accessibility
Space / Enter / ↓ / ↑Open the dropdown from the trigger.↑ / ↓Move focus between enabled options in the open dropdown.Home / EndJump to the first / last enabled option.Enter / SpaceSelect the currently focused option and close.EscapeClose the dropdown without changing the selection.TabClose the dropdown and move focus to the next element.Click outsideClose without changing selection.role="combobox"On the trigger. aria-haspopup="listbox", aria-expanded reflects open state.role="listbox"On the dropdown panel. aria-activedescendant tracks the focused option.role="option"On each item. aria-selected on the active value, aria-disabled on disabled items.Usage guidance
DoUse Select for 4+ options. For 2–3 options, prefer Radio buttons — they show all choices at a glance.DoAlways include a meaningful placeholder ("Select a role", not "Select").DoKeep option labels short — one to four words. Avoid descriptions in the option label.Don'tUse Select for yes/no choices — use a Toggle or a single Checkbox instead.Don'tPut more than 15–20 options in a Select without adding search/filter (use a Combobox pattern instead).Don'tUse disabled options to convey a warning — prefer removing the option and explaining why via helper text.Tokens used
bg/baseTrigger and dropdown backgroundbg/disabledTrigger background when disabledbg/faintOption hover/focus highlightborder/subtleDefault trigger border and dropdown panel borderborder-width/baseDefault border weight (1px)border-width/boldFocused/open border weight (2px)action/primaryFocused/open trigger border + selected option check markstatus/errorError state border and error message texttext/baseSelected value, option labelstext/subtlePlaceholder text, chevron icontext/disabledDisabled trigger text, disabled optionsradius/mdTrigger corner radius (8px)radius/lgDropdown panel corner radius (12px)radius/smOption row hover radius (4px)space/3Option horizontal padding (12px)space/1Panel padding and gap to trigger (4px)