Select
A styled native select dropdown.
Basic
A Select with a placeholder and several <option> children. The placeholder renders as a disabled hidden option so the user must make an explicit choice.
<Select placeholder="Choose a role…">
<option value="admin">Admin</option>
<option value="editor">Editor</option>
<option value="viewer">Viewer</option>
</Select>Sizes
Use the size prop to control the select's padding and font size.
<Select size="sm" placeholder="Small">…</Select>
<Select size="md" placeholder="Medium (default)">…</Select>
<Select size="lg" placeholder="Large">…</Select>Error state
Set error to apply red border and ring styles indicating a validation error.
<Select placeholder="Choose a plan…" error>
<option value="starter">Starter</option>
<option value="pro">Pro</option>
<option value="enterprise">Enterprise</option>
</Select>Disabled
Pass the native disabled attribute to prevent interaction.
<Select placeholder="Unavailable" disabled>
<option value="a">Option A</option>
</Select>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Controls padding and font size |
error | boolean | false | Applies red border and focus ring |
placeholder | string | — | Renders a disabled hidden first option |
disabled | boolean | false | Native disabled attribute |
className | string | — | Additional Tailwind classes |
children | ReactNode | — | <option> or <optgroup> elements |