Native Select

For a styled select component, see the Select component.

Installation

CLI
Manual

npx shadcn-svelte@next add native-select

Usage

showLineNumbers

<script lang="ts">
  import * as NativeSelect from "$lib/components/ui/native-select/index.js";
</script>

showLineNumbers

<NativeSelect.Root>
  <NativeSelect.Option value="">Select a fruit</NativeSelect.Option>
  <NativeSelect.Option value="apple">Apple</NativeSelect.Option>
  <NativeSelect.Option value="banana">Banana</NativeSelect.Option>
  <NativeSelect.Option value="blueberry">Blueberry</NativeSelect.Option>
  <NativeSelect.Option value="grapes" disabled>Grapes</NativeSelect.Option>
  <NativeSelect.Option value="pineapple">Pineapple</NativeSelect.Option>
</NativeSelect.Root>

Examples

With Groups

Organize options using NativeSelect.OptGroup for better categorization.

showLineNumbers

<NativeSelect.Root>
  <NativeSelect.Option value="">Select a food</NativeSelect.Option>
  <NativeSelect.OptGroup label="Fruits">
    <NativeSelect.Option value="apple">Apple</NativeSelect.Option>
    <NativeSelect.Option value="banana">Banana</NativeSelect.Option>
    <NativeSelect.Option value="blueberry">Blueberry</NativeSelect.Option>
  </NativeSelect.OptGroup>
  <NativeSelect.OptGroup label="Vegetables">
    <NativeSelect.Option value="carrot">Carrot</NativeSelect.Option>
    <NativeSelect.Option value="broccoli">Broccoli</NativeSelect.Option>
    <NativeSelect.Option value="spinach">Spinach</NativeSelect.Option>
  </NativeSelect.OptGroup>
</NativeSelect.Root>

Disabled State

Disable individual options or the entire select component.

Invalid State

Show validation errors with the aria-invalid attribute and error styling.

showLineNumbers

<NativeSelect.Root aria-invalid="true">
  <NativeSelect.Option value="">Select a country</NativeSelect.Option>
  <NativeSelect.Option value="us">United States</NativeSelect.Option>
  <NativeSelect.Option value="uk">United Kingdom</NativeSelect.Option>
  <NativeSelect.Option value="ca">Canada</NativeSelect.Option>
</NativeSelect.Root>

Native Select vs Select

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

The NativeSelect component provides native HTML select functionality with consistent styling that matches your design system.

Accessibility

The component maintains all native HTML select accessibility features.
Screen readers can navigate through options using arrow keys.
The chevron icon is marked as aria-hidden="true" to avoid duplication.
Use aria-label or aria-labelledby for additional context when needed.

showLineNumbers

<NativeSelect.Root aria-label="Choose your preferred language">
  <NativeSelect.Option value="en">English</NativeSelect.Option>
  <NativeSelect.Option value="es">Spanish</NativeSelect.Option>
  <NativeSelect.Option value="fr">French</NativeSelect.Option>
</NativeSelect.Root>

API Reference

NativeSelect.Root

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

Prop	Type	Default
`class`	`string`

All other props are passed through to the underlying <select> element.

<NativeSelect.Root>
  <NativeSelect.Option value="option1">Option 1</NativeSelect.Option>
  <NativeSelect.Option value="option2">Option 2</NativeSelect.Option>
</NativeSelect.Root>

NativeSelect.Option

Represents an individual option within the select.

Prop	Type	Default
`value`	`string`
`disabled`	`boolean`	`false`
`class`	`string`

All other props are passed through to the underlying <option> element.

<NativeSelect.Option value="apple">Apple</NativeSelect.Option>
<NativeSelect.Option value="banana" disabled>Banana</NativeSelect.Option>

NativeSelect.OptGroup

Groups related options together for better organization.

Prop	Type	Default
`label`	`string`
`disabled`	`boolean`	`false`
`class`	`string`

All other props are passed through to the underlying <optgroup> element.

<NativeSelect.OptGroup label="Fruits">
  <NativeSelect.Option value="apple">Apple</NativeSelect.Option>
  <NativeSelect.Option value="banana">Banana</NativeSelect.Option>
</NativeSelect.OptGroup>

Get Started

Components

Customization

CLI

Advanced

Resources

Installation

Usage

Examples

With Groups

Disabled State

Invalid State

Native Select vs Select

Accessibility

API Reference

NativeSelect.Root

NativeSelect.Option

NativeSelect.OptGroup

Links

​Installation

​Usage

​Examples

​With Groups

​Disabled State

​Invalid State

​Native Select vs Select

​Accessibility

​API Reference

​NativeSelect.Root

​NativeSelect.Option

​NativeSelect.OptGroup

​Links

Installation

Usage

Examples

With Groups

Disabled State

Invalid State

Native Select vs Select

Accessibility

API Reference

NativeSelect.Root

NativeSelect.Option

NativeSelect.OptGroup

Links