StorybookGitHub

Native Select

A styled wrapper around the native HTML select element.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/native-select.json

Usage

Reach for native select over Select when you want the browser's own picker — mobile wheel pickers, built-in keyboard search, and no JavaScript-driven positioning — while keeping the same visual language.

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

<template>
  <NativeSelect v-model="fruit">
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
    <NativeSelectOptGroup label="Citrus">
      <NativeSelectOption value="orange">Orange</NativeSelectOption>
      <NativeSelectOption value="lemon">Lemon</NativeSelectOption>
    </NativeSelectOptGroup>
  </NativeSelect>
</template>

Supports v-model, disabled state, and aria-invalid styling for form errors.