⌘K

select component

Drop-in semantic component. See examples, sizes, variants, and source.

Native HTML <select> wrapped in select-wrapper for consistent chrome and a chevron indicator. Pair with select-label and select-helper for labelled fields. Behavior and accessibility enhancements are auto-mounted by select.js.

Native Select Component

Basic Select - Simple and Accessible

This is a helper text for the select

Select with Label and Required Field

Please select your country of residence

Select Sizes - Five Standard Sizes

Select States - Visual Feedback

This field is required

Valid selection

Please review

Field is disabled

Grouped Options - Organized Categories

Multiple Selection - Select Multiple Options

Hold Ctrl/Cmd to select multiple options

Class API Reference

Type Class Usage Notes
Base select-wrapper Container around a native <select> + chevron Always required
select-label Label text above the select Use a nested required for the asterisk
select-helper Helper / hint text below the select Adopts state colors when wrapper has error/success/warning
Sizes xs 28px height — tiny Modifier on select-wrapper
sm 32px height — small Modifier on select-wrapper
(default) 40px height — medium No size class needed
xl 48px height — large Modifier on select-wrapper
lg 56px height — big Modifier on select-wrapper
States error Red border + red focus ring Modifier on select-wrapper
success Green border + green focus ring Modifier on select-wrapper
warning Yellow border + yellow focus ring Modifier on select-wrapper
disabled Disabled appearance Use the disabled attribute on the <select> instead
Layout full-width Wrapper expands to 100% width Modifier on select-wrapper
rounded-none Square corners on the select Modifier on select-wrapper
rounded-full Pill-shaped select Modifier on select-wrapper
Wrapper chevron The dropdown indicator SVG inside the wrapper Auto-positioned absolutely on the right