<NativeSelect.Root defaultValue="design">
<NativeSelect.OptGroup label="Creative">
<NativeSelect.Option value="design">Design</NativeSelect.Option>
</NativeSelect.OptGroup>
</NativeSelect.Root>No portal, no JavaScript for the popup: the OS draws the list. That makes it the right choice on mobile and inside a form that has to work before hydration.
API
NativeSelect.Root
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "sm" | "default" | |
wrapperClassName | string | — | Classes for the wrapper <div> that hosts the caret overlay. Use this for
layout and width (e.g. w-full, w-48); className styles the inner
<select> itself, matching the rest of the kit's form controls. |
Plus every <select> prop. Source: native-select/components/native-select-root.tsx.
NativeSelect.OptGroup
Plus every <optgroup> prop. Source: native-select/components/native-select-optgroup.tsx.
NativeSelect.Option
Plus every <option> prop. Source: native-select/components/native-select-option.tsx.