Select
readyDropdown field (Platform Dropdown) with chevron and an optional launch action.
The Select (Figma “Platform Dropdown”) is the dropdown counterpart to the Text Field. It shares the same label, border, and sizing, adds a chevron, and can optionally show an inline divider + launch icon for opening the linked record.
Anatomy
Hazel
- 1 Label — names the field; matches the Text Field label
- 2 Required marker — red asterisk when mandatory
- 3 Value / placeholder — selected choice, or muted 'Select'
- 4 Chevron — indicates the control opens a list
- 5 Launch action — optional divider + icon to open the linked record
Variants
Default
Select
<Select label="Marital Status" options={["Single", "Married", "Divorced", "Widowed"]} />Required, with value
California
<Select label="State" required value="California" options={["California", "Nevada", "Oregon"]} />With launch action
The launch affordance links the field to a connected record.
Hazel
<Select label="Eye Color" launch value="Hazel" options={["Brown", "Blue", "Green", "Hazel"]} />States
Select
Default
No value chosen.
Intake
Selected
A value is chosen.
Select
Required
Shows the asterisk.
Hazel
With launch
Divider + launch icon.
Usage
California
Use a Select when there are 4+ predefined options.
Select
Don't use a Select for a yes/no choice — use a Radio Group.
Accessibility
- Provide a
label; it is associated with the control via a derivedid. - The chevron is decorative — the control itself communicates that it opens a list.
- Required fields render a visual
*; pair it withrequired. - The launch action should be reachable and labelled when it opens a linked record.
Content
- Use sentence-case labels that name the data, not the action (“Marital status”).
- Order options logically (alphabetical, or by frequency) for scannability.
- Keep the placeholder as the neutral “Select” unless a more specific prompt helps.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | — | Field label. |
name | string | — | Select name; also derives the id. |
placeholder | string | "Select" | Shown when no value is chosen. |
value | string | — | Selected value. |
options | string[] | [] | Available choices. |
required | boolean | false | Renders the red * marker. |
launch | boolean | false | Shows the divider + launch icon. |
helper | string | — | Helper text below the field. |
Related
- Text Field — the input this shell is based on.
- Radio Group — for small, always-visible choice sets.
- Date Picker — date-specific field variant.