Native select
A native select component for choosing a single option from a predefined list. Built on the browser select element for accessibility, performance, and broad compatibility.
Basic
Use NativeSelect to let users choose one option from a list.
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/native-select
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Anatomy
import { Description, Label } from "@/components/ui/field"
import { NativeSelect, NativeSelectContent } from "@/components/ui/native-select"<NativeSelect>
<Label>Role</Label>
<NativeSelectContent>
<option value="owner">Owner</option>
<option value="admin">Admin</option>
<option value="member">Member</option>
<option value="viewer">Viewer</option>
</NativeSelectContent>
<Description>Pick the default permission level for new teammates.</Description>
</NativeSelect>Label
Use a label to describe what the selection controls.
Description
Use a description to provide guidance or context for the selection.
Controlled
Control the value via state when you need to react to changes, sync with other inputs, or set the value programmatically.
Uncontrolled
Use the uncontrolled pattern when you do not need to read or update the value from outside the component.
Invalid
Indicate an error state with the aria-invalid prop. This will display an error message and apply error styles to the select.
Disabled
Disable the select to prevent interaction and communicate that the field is currently unavailable.
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.