Dropdown
Sourcecomponents/Dropdown.astro
Overview
Six states — default, hover, chosen, focus, error and disabled — on light, dark & image. Built on the native <select>, so keyboard and mobile pickers come for free.
On light
default
hover
chosen
focus
error
disabled
Choose a range.
On dark
default
hover
chosen
focus
error
disabled
Choose a range.
On image
default
hover
chosen
focus
error
disabled
Choose a range.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | — | Field label above the dropdown. |
options | { value, label }[] | — | Options to render. Or slot <option>s directly. |
placeholder | string | — | Disabled first option shown until a choice is made. |
value | string | — | Pre-selected value. |
helper | string | — | Optional hint beneath the field. |
error | string | — | Error message; flips to the error style. |
optional | boolean | false | Shows "(optional)" beside the label. |
disabled | boolean | false | Dims and blocks the dropdown. |
surface | 'light' | 'dark' | 'light' | Dark surface treatment. |
Usage
Pass options or slot <option>s. Add a placeholder for the empty state.
<Dropdown
name="budget"
label="Budget"
placeholder="Select a range"
options={[
{ value: 's', label: 'CHF 4k – 10k' },
{ value: 'm', label: 'CHF 10k – 25k' },
]}
/>