Kalau Anda butuh select yang di-style penuh, lihat komponen Select.

Select status Todo In Progress Done Cancelled

Instalasi

npx shadcn-vue@latest add native-select

Penggunaan

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

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

Contoh

Dengan Grup

Kelompokkan pilihan memakai NativeSelectOptGroup agar lebih tertata.

Select department Frontend Backend DevOps Sales Rep Account Manager Sales Director Customer Support Product Manager Operations Manager

<template>
  <NativeSelect>
    <NativeSelectOption value="">
      Select a food
    </NativeSelectOption>
    <NativeSelectOptGroup label="Fruits">
      <NativeSelectOption value="apple">
        Apple
      </NativeSelectOption>
      <NativeSelectOption value="banana">
        Banana
      </NativeSelectOption>
      <NativeSelectOption value="blueberry">
        Blueberry
      </NativeSelectOption>
    </NativeSelectOptGroup>
    <NativeSelectOptGroup label="Vegetables">
      <NativeSelectOption value="carrot">
        Carrot
      </NativeSelectOption>
      <NativeSelectOption value="broccoli">
        Broccoli
      </NativeSelectOption>
      <NativeSelectOption value="spinach">
        Spinach
      </NativeSelectOption>
    </NativeSelectOptGroup>
  </NativeSelect>
</template>

Keadaan Nonaktif

Nonaktifkan satu pilihan tertentu, atau seluruh komponen select sekaligus.

Select priority Low Medium High Critical

Keadaan Tidak Valid

Tampilkan kesalahan validasi lewat atribut aria-invalid beserta style error-nya.

Select role Admin Editor Viewer Guest

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

Integrasi dengan Form

Bisa dipakai bersama library form seperti VeeValidate untuk komponen yang dikendalikan dari luar.

Country

Select a country United States United Kingdom Canada

Select a country

Native Select dibanding Select

• Pakai NativeSelect kalau Anda butuh perilaku asli browser, performa lebih ringan, atau dropdown yang nyaman di mobile.
• Pakai Select kalau Anda butuh style kustom, animasi, atau interaksi yang lebih rumit.

Komponen NativeSelect menyediakan fungsi select bawaan HTML dengan tampilan yang selaras dengan design system Anda.

Aksesibilitas

• Komponen ini mempertahankan seluruh fitur aksesibilitas select bawaan HTML.
• Pembaca layar bisa menelusuri pilihan memakai tombol panah.
• Ikon panahnya ditandai aria-hidden="true" supaya tidak dibacakan dua kali.
• Pakai aria-label atau aria-labelledby kalau butuh konteks tambahan.

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

Referensi API

NativeSelect

Komponen select utama yang membungkus elemen select bawaan HTML.

Prop	Tipe	Bawaan
class	string

Semua prop lain diteruskan ke elemen <select> di baliknya.

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

NativeSelectOption

Mewakili satu pilihan di dalam select.

Prop	Type	Default
value	string
disabled	boolean	false
class	string

Semua prop lain diteruskan ke elemen <option> di baliknya.

<template>
  <NativeSelectOption value="apple">
    Apple
  </NativeSelectOption>
  <NativeSelectOption value="banana" disabled>
    Banana
  </NativeSelectOption>
</template>

NativeSelectOptGroup

Mengelompokkan pilihan-pilihan yang berkaitan agar lebih tertata.

Prop	Type	Default
label	string
disabled	boolean	false
class	string

Semua prop lain diteruskan ke elemen <optgroup> di baliknya.

<template>
  <NativeSelectOptGroup label="Fruits">
    <NativeSelectOption value="apple">
      Apple
    </NativeSelectOption>
    <NativeSelectOption value="banana">
      Banana
    </NativeSelectOption>
  </NativeSelectOptGroup>
</template>