Select

A single-choice dropdown field: a trigger showing the chosen value that opens a panel of options, styled to match Canvas inputs.
Pass label (and required) to name the field: iOS and web render the label above the trigger, while Android floats the Material 3 in-container label once the menu opens or a value is selected. On Android the trigger grows with the user's text size, and a label longer than the trigger truncates on one line clear of the chevron while the trigger's accessible name stays the whole label. The trigger fills the parent it is given; a step of its own (xs, lg, …, with start to pin it to the leading edge) or a Container step sets its measure.
In glass mode the option panel is a dense-layer glass card under the trigger (or above it when it fits there); the trigger stays in place with its value and chevron, and the chosen value and expanded state commit immediately. Solid mode paints the skin's own panel.
The label also names the option list. Use accessibilityLabel to provide an explicit purpose when the visible label or placeholder is insufficient; it overrides both accessible names. A required field announces "required" with the button name and marks the option list as required. The selected value never replaces the field's purpose.
Pass ref to access the interactive trigger, preserving overlay measurement. Use useRef<ComponentRef<typeof Select>>(null) from React, or useRef<View>(null) with React Native's View type. Object and callback refs are supported and detach on unmount. Calling ref.current?.focus() or .blur() delegates to the host without activating the control. Browser focus is supported; native focus depends on the platform and React Native version, and is separate from accessibility focus.
Country
iOS
Android
Country
Web
tsx
<Select label="Country" defaultValue="United States" options={["United States", "Canada", "Mexico"]} />

Props

Prop
Description
value
string
Controlled selection; omit for uncontrolled use. Empty shows the placeholder. With plain string options this is the option itself; with `SelectOption` objects it is the option's `value`, and the trigger shows its `label`.
defaultValue
string
Initial selection for uncontrolled use (a bare <Select options/> picks on its own).
options
Array<string | SelectOption>
The selectable options: bare strings, or `{ value, label }` objects when the stored value differs from the text shown for it.
label
string
The field's persistent label. Its placement is platform-adaptive: iOS and web render it ABOVE the trigger; Android renders the Material 3 in-container FLOATING label (centered like a placeholder at rest, floating to the top once the menu opens or a value is selected). The label names the field for a11y.
accessibilityLabel
string
Accessible purpose for the trigger and option list. Overrides the visible label for assistive technology; otherwise the label or placeholder names them.
inline
boolean
Places the `label` as a LEADING cluster INSIDE the trigger row (a toolbar-style labeled select) instead of the persistent above/floating placement. Takes effect only alongside `label`. The inline label still names the trigger (accessibilityLabel / aria-labelledby) and shares its tap target, since it lives inside the trigger Pressable. Pairs with `fit` for a content-hugging toolbar cluster.
required
boolean
Marks the field as required and announces "required" with the trigger name. A visible label also gets a decorative destructive "*".
icon
boolean
Renders a leading globe glyph inside the trigger, indented so the value clears it.
placeholder
string
Prompt shown in the trigger when no value is selected.
open
boolean
Controlled open state of the option list; omit for uncontrolled use.
defaultOpen
boolean
Initial open state for uncontrolled use.
onOpenChange
(open: boolean) => void
Fired when the open state changes (trigger press, select), in both modes.
disabled
boolean
Dims the control and blocks interaction.
onSelect
(option: string) => void
Called with the chosen option's value when a row is pressed (both modes).
testID
string
E2E hook forwarded to the trigger pressable.
small
boolean
Size (pick one; default is the medium field, matching Input's h-9).
large
boolean
Size (pick one; default is the medium field, matching Input's h-9).
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.
xxxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
sm
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
md
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
lg
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wide
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wider
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
widest
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
page
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
start
boolean
Pin a capped component to the leading edge instead of centering it in its column.
ref
React.Ref<View>
Ref to the interactive trigger, preserving overlay measurement. Typed as a React Native View. On web, React Native Web exposes its DOM host; focus() and blur() move browser focus. Native host behavior depends on the platform and React Native version. Calling focus() does not activate the control or call accessibility focus APIs.

Do & Don’t

Placeholder

Don’t
Country
A placeholder as a normal option can be submitted as a real value.
Do
Country
Use the placeholder prop for the prompt so it can never be submitted as a value.

When to use

Don’t
Email notifications
A select for a single on/off choice buries a one-tap decision behind a dropdown.
Do
Status
Reserve a select for picking one of several mutually exclusive options; use a switch or radios for two.

Small

Don’t
Rows per page
A stacked block label towers over the small control and breaks the dense row it belongs in.
Do
Keep the small select inline with a short label so it stays compact inside toolbars and table footers.

Default size

Don’t
City
State
A default select next to a taller lg input leaves the row baselines misaligned.
Do
City
State
Match the default select to sibling inputs at the same height so the form row lines up.

Large

Don’t
Plan
Tiny option text inside a tall control wastes the height and looks like an accidental mismatch.
Do
Plan
Scale the text up with the height so the large select reads as a deliberate, touch-friendly target.
← ScrollView
Skeleton →