Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/native-selectNative Select
A styled native select for forms and phones: the platform's own picker and keyboard handling in the same shell as the other selects. Label, hint, description and error, a custom chevron, a leading icon, a greyed placeholder, optgroups, disabled options and three sizes, with no JavaScript beyond React.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
options
(NativeSelectOption | NativeSelectGroup)[]
Options or
<optgroup>groups. Or pass<option>children yourself.label
React.ReactNode
hint
React.ReactNode
Quiet text to the right of the label, such as "Optional".
description
React.ReactNode
error
React.ReactNode
Replaces the description and marks the select
aria-invalid.placeholder
string
Shown, greyed, until something is picked. Renders an empty, unpickable first option.
leading
React.ReactNode
An icon inside the field, before the value.
size
SelectSize
Default
"md"selectClassName
string
Classes for the
<select>itself;classNamegoes on the root.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | (NativeSelectOption | NativeSelectGroup)[] | – | Options or <optgroup> groups. Or pass <option> children yourself. |
| label | React.ReactNode | – | |
| hint | React.ReactNode | – | Quiet text to the right of the label, such as "Optional". |
| description | React.ReactNode | – | |
| error | React.ReactNode | – | Replaces the description and marks the select aria-invalid. |
| placeholder | string | – | Shown, greyed, until something is picked. Renders an empty, unpickable first option. |
| leading | React.ReactNode | – | An icon inside the field, before the value. |
| size | SelectSize | "md" | |
| selectClassName | string | – | Classes for the <select> itself; className goes on the root. |
