Select
A real <select>. Options, keyboard navigation, typeahead, and the platform's own picker UI (correct for the device it's running on, a wheel on iOS, a native dropdown on desktop) all come from the browser. Only the closed control is restyled.
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
Used for shipping estimates.
Unstyled
Same component — Kernel look stripped. See Platforms.
invalid
required
disabled
hide label
label offset
Usage
<Select label="Country" description="Used for shipping estimates." errorMessage="Please choose a country.">
<SelectOption value="uk">United Kingdom</SelectOption>
<SelectOption value="us">United States</SelectOption>
<SelectOption value="de">Germany</SelectOption>
</Select><kernel-select label="Country" description="Used for shipping estimates." error-message="Please choose a country.">
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="de">Germany</option>
</kernel-select>Props
| Prop | Type | Default |
|---|---|---|
label | ReactNode (required) | — |
hideLabel | boolean | false |
description | ReactNode | — |
errorMessage | ReactNode | — |
invalid | boolean | false |
A note on full customisation
appearance: base-select will eventually allow a fully custom-styled option list on top of the same native element. It's too new to depend on by default today, so the dropdown popup itself still uses the browser's native rendering.