Native Select

Component native-select-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx createui@latest add native-select
Copy

Usage

Copyimport {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select"

Copy<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

Examples

Groups

Use NativeSelectOptGroup to organize options into categories.

Component native-select-groups not found in registry.

Disabled

Add the disabled prop to the NativeSelect component to disable the select.

Component native-select-disabled not found in registry.

Invalid

Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.

Component native-select-invalid not found in registry.

Native Select vs Select

• Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
• Use Select for custom styling, animations, or complex interactions.

API Reference

NativeSelect

The main select component that wraps the native HTML select element.

Copy<NativeSelect>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

NativeSelectOption

Represents an individual option within the select.

NativeSelectOptGroup

Groups related options together for better organization.

Copy<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>