Native Select

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @shark-ui/native-select

Usage

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

<NativeSelect>
  <NativeSelectOptGroup label="Group 1">
    <NativeSelectOption value="1">Option 1</NativeSelectOption>
    <NativeSelectOption value="2">Option 2</NativeSelectOption>
    <NativeSelectOption value="3">Option 3</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Sizes

Use the size prop to change the select height.

Small

Medium

Large

Examples

Default

Groups

Use <NativeSelectOptGroup /> to group options with a label.

Disabled

Use the disabled prop to disable the select.

Invalid

Use the aria-invalid to <Select /> or invalid prop on the <Field /> to mark the select as invalid and show error styling.

Native Select vs Select

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

API Reference

NativeSelect

Extends native <select> props. Additional props:

NativeSelectOptGroup

Extends native <optgroup> props. Use label for the group label.

NativeSelectOption

Extends native <option> props. Use value and children for option value and label.