Select
A real <select>. Options, keyboard navigation, typeahead, and form behaviour all come from the browser. Supporting browsers use a native picker styled with Kernel's existing tokens; other browsers keep the styled control and platform picker.
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
Used for shipping estimates.
Same component — Kernel look stripped. See Platforms.
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
Single dropdowns use appearance: base-select inside a feature query that also checks ::picker(select) support. The existing chevron, colours, and control dimensions stay in place. Multiple selects and listboxes retain their existing rendering. Keep text in every option so labels, typeahead, and fallback pickers work without additional JavaScript.