Picks one value from a list, like a native <select> but styled from the design tokens. Arrow keys and type-to-select work both open and closed. Shares the size scale with Input and Button. Works inside a Field.
<select>
<Select placeholder="Choose a plan" options={[ { value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }, ]} onValueChange={setPlan}/> Copy
<Select placeholder="Choose a plan" options={[ { value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }, ]} onValueChange={setPlan}/>
Picks one value from a list, like a native
<select>but styled from the design tokens. Arrow keys and type-to-select work both open and closed. Shares the size scale with Input and Button. Works inside a Field.