DocsComponents
Select
The only dropdown: a native select in two layouts.
Category One category per activity.
- 1Label above (field) or beside (inline)
- 2Native select in the text-field pill: min. 44 px, 2 px border
- 3Chevron 16 px from the app, 16 px from the right edge, ignores the pointer
- 4Hint or error line under the field
Variants
Two layouts of one component. Field sits in forms and matches the text field. Inline sits in a list toolbar: label beside it, value in semibold.
In years
States
Field layout. Focus is forced below so it shows without a keyboard; the selects above react to real focus.
Choose a category for the activity
API reference
Props of SelectField. Any other native select attribute (value, onChange, disabled…) passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | – | Required. Links the label to the select. |
label | string | – | Required. Beside the select (inline) or above it (field). |
layout | "inline" | "field" | "inline" | Inline: small select in a list toolbar. Field: form field that looks like the text field. |
variant | "plain" | "outline" | "plain" | Inline only. Plain has no border (sorting), outline has one (items per page). |
labelFromMd | boolean | false | Inline only. Label visible from 768 px; on phones it stays for screen readers. |
hint | string | – | Field only. Text under the select, linked via aria-describedby. |
error | string | null | – | Field only. Message under the select; sets aria-invalid, announced as an alert. |
chevron | node | – | Arrow icon from the app. Without it the browser’s native arrow stays. |
children | option elements | – | Plain native options. |
Accessibility
- A native select: keyboard, screen readers and the phone’s own picker work without extra code.
- Touch target of at least 44 px in both layouts; the chevron ignores the pointer, so the whole pill opens the list.
- Field: hint and error are linked via aria-describedby; the error sets aria-invalid and is announced as an alert.
- Inline with labelFromMd: the label is hidden visually on phones but stays for screen readers.
- Contrast: value 19.3:1 on the input background, hint 6.9:1, inline label 6.9:1 and outline border 13.3:1 on the page background; error 4.8:1 on a white card (4.4:1 on the lilac page, so keep forms on cards).
Do and don’t
Category