ContextQMD
Back to Shark UI

Native Select

docs/components/native-select

latest7.6 KB
Original Source

Sections

Components

Utilities

Forms

Hooks

Native Select

Copy Markdown

Styled native HTML select element.

PreviewCode

Select an optionBananaAppleOrangePineapple

Installation#

CLIManual

pnpmbunnpmyarn

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

Anatomy#

NativeSelect
├── NativeSelectOption
└── NativeSelectOptGroup
    └── NativeSelectOption

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>

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.

Sizes#

Use the size prop to change the select height.

Small#

PreviewCode

Select an optionBananaAppleOrange

Medium#

PreviewCode

Select an optionBananaAppleOrange

Large#

PreviewCode

Select an optionBananaAppleOrange

States#

Controlled#

Use value and onChange to control the select externally.

PreviewCode

Select an optionBananaAppleOrange

Selected: —

Disabled#

Use the disabled prop to disable the select.

PreviewCode

Select an optionBananaAppleOrange

Invalid#

Use the invalid prop to mark the select as invalid.

PreviewCode

Select a fruit BananaAppleOrange

Examples#

Groups#

Use NativeSelectOptGroup to group options with a label.

PreviewCode

Select an optionBananaMangoPineappleCarrotPotatoTomato

With Field#

Wrap in Field with FieldLabel and FieldDescription for proper labeling and accessibility.

PreviewCode

Country Select a countryBrazilMexicoIreland

Used for shipping estimates

API Reference#

NativeSelect#

Extends native <select> props. Additional props:

PropTypeDefault
size`"sm""md"
disabledboolean-
invalidboolean-

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.

For a complete list of props, see the Ark UI documentation.

[

Previous page

Menu ](/docs/components/menu)[

Next page

Number Input ](/docs/components/number-input)

On This Page

InstallationAnatomyUsageNative Select vs SelectSizesSmallMediumLargeStatesControlledDisabledInvalidExamplesGroupsWith FieldAPI ReferenceNativeSelectNativeSelectOptGroupNativeSelectOption