Native Select

A styled native HTML select element with consistent design system integration. For search, multi-select, or custom option markup, use Select or Combobox instead.

Default

Options placed directly under NativeSelect, no group wrapper.

Usage

Import the parts you need from the component's folder.

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

Groups

Use NativeSelectOptGroup to organize options into categories.

Disabled

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

Invalid

Use aria-invalid to show validation errors, and data-invalid on the surrounding Field for styling.

Anatomy

Import all parts and piece them together.

vue

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

<template>
  <NativeSelect>
    <NativeSelectOptGroup>
      <NativeSelectOption />
    </NativeSelectOptGroup>
    <NativeSelectOption />
  </NativeSelect>
</template>

API Reference

NativeSelect

Prop	Type	Default	Description
`modelValue`	`string \| string[]`	`""`	Selected value. Supports v-model.
`size`	`"sm" \| "default"`	`"default"`	Control height. sm renders the compact variant.
`disabled`	`boolean`	`false`	Disable the select. Forwarded to the native element.
`class`	`string`	—	Merged onto the native select element.

Event	Description
`update:modelValue`	Fires when the selection changes. Enables v-model.

Slot	Description
`default`	NativeSelectOption and NativeSelectOptGroup children.

NativeSelectOption

Prop	Type	Default	Description
`value`	`string`	—	Value committed when the option is selected.
`disabled`	`boolean`	`false`	Disable selection of this option.

NativeSelectOptGroup

Prop	Type	Default	Description
`label`	`string`	—	Group heading rendered by the browser.
`disabled`	`boolean`	`false`	Disable every option in the group.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space`	Opens the native dropdown.
`↑`	Moves to the previous option.
`↓`	Moves to the next option.
`Home`	Jumps to the first option.
`End`	Jumps to the last option.
`Esc`	Closes the dropdown without changing the value.

Renders a real select element, so the browser supplies the full listbox semantics and the platform-native dropdown on mobile.
Pair with Field and FieldLabel for a labelled control; aria-invalid drives the destructive border and ring.

Location Combobox Number Field