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

Select status Todo In Progress Done Cancelled

Installation

pnpm dlx kliping@latest add native-select

Usage

<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>

Examples

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.

Accessibility

• 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>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/native-select/native-select.vue components/ui/native-select/native-select-opt-group.vue components/ui/native-select/native-select-option.vue components/ui/native-select/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

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

API Reference

NativeSelect

Komponen select utama yang membungkus elemen select bawaan HTML.

Prop	Type	Default	Description
modelValue?	AcceptableValue | AcceptableValue[]	—	The controlled value. Bind with v-model.

Event	Payload	Description
@update:modelValue	[]	Emitted when the value changes.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"native-select-wrapper"

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.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"native-select-option"

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.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"native-select-optgroup"

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>

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --destructive, --input, --muted-foreground, --popover, --popover-foreground, --primary, --primary-foreground, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.