select field
SelectField wraps a native HTML select in the shared DS single-line container — cream surface, dark ink border, offset shadow, and 2px radius — and suppresses the browser's native arrow via appearance: none. A fixed 10×10 SVG chevron sits as a trailing flex item inside the bar. The label contract, all interactive states (hover, focus-within, active, disabled), and every token slot mirror InputField exactly. Children should be <option> elements.
| field | value |
|---|---|
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/select-field/SelectField.tsx packages/ds/src/components/select-field/select-field.css |
with label
bare — no label
disabled
component tokens
| token | source | description |
|---|---|---|
--select-field-bg | @arieare/ds/select-field.css | Select bar background. Defaults to --bkg-2 (cream surface). |
--select-field-border | @arieare/ds/select-field.css | Select bar border color. Defaults to --ink-1 (primary dark ink). |
--select-field-shadow | @arieare/ds/select-field.css | Select bar box-shadow. Defaults to 1px 1px 0px --ink-2 (muted offset shadow). |
--select-field-ink | @arieare/ds/select-field.css | Selected value text color. Defaults to --ink-1. |
--select-field-label-ink | @arieare/ds/select-field.css | Label text color. Defaults to --ink-1. |
--select-field-chevron-ink | @arieare/ds/select-field.css | Chevron icon color. Defaults to --ink-2. |
--select-field-height | @arieare/ds/select-field.css | Bar height override. Defaults to --btn-h (20px). |
--select-field-radius | @arieare/ds/select-field.css | Bar border-radius override. Defaults to --rds-interact (2px). |
--btn-h / --rds-interact / --p-size-6 / --p-size-8 | @arieare/ds/tokens.css | Shared sizing tokens: container height (20px), border-radius (2px), bar padding/gap (6px), label–bar gap (8px). |
--type-p-base / --type-p-small / --type-p-base-feature-settings | @arieare/ds/tokens.css | Select uses --type-p-base (14px/20px); label uses --type-p-small (12px/18px). Both apply the shared OpenType feature settings. |
props
| prop | type | default | description |
|---|---|---|---|
label | ReactNode | — | Optional label rendered above the select bar and linked via htmlFor. |
id | string | — | Select id. Auto-generated via React.useId() when omitted; links the label htmlFor. |
children | ReactNode | — | <option> elements rendered inside the native select. |
value / onChange | string / ChangeEventHandler | — | Controlled value contract. Use defaultValue for uncontrolled usage. |
...select attributes | SelectHTMLAttributes<HTMLSelectElement> | — | All standard select attributes (disabled, required, multiple, etc.) forwarded to the underlying select element. |