120k
New

Native Select

PreviousNext

A styled native HTML select element with consistent design system integration.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/native-select

Usage

<script lang="ts">
  import * as NativeSelect from "$lib/components/ui/native-select/index.js";
</script>
<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="pineapple">Pineapple</NativeSelect.Option>
</NativeSelect.Root>

Composition

Simple

Options placed directly under NativeSelect.Root (no NativeSelect.OptGroup).

NativeSelect.Root
├── NativeSelect.Option
├── NativeSelect.Option
├── NativeSelect.Option
└── NativeSelect.Option

With groups

Use NativeSelect.OptGroup to organize options into categories.

NativeSelect.Root
├── NativeSelect.OptGroup
│   ├── NativeSelect.Option
│   └── NativeSelect.Option
└── NativeSelect.OptGroup
    ├── NativeSelect.Option
    └── NativeSelect.Option

Examples

Groups

Use NativeSelect.OptGroup to organize options into categories.

Disabled

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

Invalid

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

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.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

NativeSelect.Root

The main select component that wraps the native HTML 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.

PropTypeDefault
valuestring
disabledbooleanfalse

NativeSelect.OptGroup

Groups related options together for better organization.

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