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.

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.

Metal FX Navigation Menu