Native Select

Elemen select bawaan HTML yang di-style agar menyatu dengan design system Anda.

TIP

---

icon: true

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

Select status Todo In Progress Done Cancelled

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

<template>
  <NativeSelect>
    <NativeSelectOption value="">
      Select status
    </NativeSelectOption>
    <NativeSelectOption value="todo">
      Todo
    </NativeSelectOption>
    <NativeSelectOption value="in-progress">
      In Progress
    </NativeSelectOption>
    <NativeSelectOption value="done">
      Done
    </NativeSelectOption>
    <NativeSelectOption value="cancelled">
      Cancelled
    </NativeSelectOption>
  </NativeSelect>
</template>

Instalasi

CLI

npx shadcn-vue@latest add native-select

Manual

Pasang dependensi berikut:

npm install reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

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

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

<template>
  <NativeSelect>
    <NativeSelectOption value="">
      Select department
    </NativeSelectOption>
    <NativeSelectOptGroup label="Engineering">
      <NativeSelectOption value="frontend">
        Frontend
      </NativeSelectOption>
      <NativeSelectOption value="backend">
        Backend
      </NativeSelectOption>
      <NativeSelectOption value="devops">
        DevOps
      </NativeSelectOption>
    </NativeSelectOptGroup>
    <NativeSelectOptGroup label="Sales">
      <NativeSelectOption value="sales-rep">
        Sales Rep
      </NativeSelectOption>
      <NativeSelectOption value="account-manager">
        Account Manager
      </NativeSelectOption>
      <NativeSelectOption value="sales-director">
        Sales Director
      </NativeSelectOption>
    </NativeSelectOptGroup>
    <NativeSelectOptGroup label="Operations">
      <NativeSelectOption value="support">
        Customer Support
      </NativeSelectOption>
      <NativeSelectOption value="product-manager">
        Product Manager
      </NativeSelectOption>
      <NativeSelectOption value="ops-manager">
        Operations Manager
      </NativeSelectOption>
    </NativeSelectOptGroup>
  </NativeSelect>
</template>

<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

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

<template>
  <NativeSelect disabled>
    <NativeSelectOption value="">
      Select priority
    </NativeSelectOption>
    <NativeSelectOption value="low">
      Low
    </NativeSelectOption>
    <NativeSelectOption value="medium">
      Medium
    </NativeSelectOption>
    <NativeSelectOption value="high">
      High
    </NativeSelectOption>
    <NativeSelectOption value="critical">
      Critical
    </NativeSelectOption>
  </NativeSelect>
</template>

Keadaan Tidak Valid

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

Select role Admin Editor Viewer Guest

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

<template>
  <NativeSelect aria-invalid="true">
    <NativeSelectOption value="">
      Select role
    </NativeSelectOption>
    <NativeSelectOption value="admin">
      Admin
    </NativeSelectOption>
    <NativeSelectOption value="editor">
      Editor
    </NativeSelectOption>
    <NativeSelectOption value="viewer">
      Viewer
    </NativeSelectOption>
    <NativeSelectOption value="guest">
      Guest
    </NativeSelectOption>
  </NativeSelect>
</template>

<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

<script setup lang="ts">
import { h } from 'vue'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm, Field as VeeField } from 'vee-validate'
import { toast } from 'vue-sonner'

import { z } from 'zod'
import { Button } from '@/components/ui/button'
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from '@/components/ui/field'
import {
  NativeSelect,
  NativeSelectOption,
} from '@/components/ui/native-select'

const formSchema = toTypedSchema(z.object({
  country: z.string().min(2, {
    message: 'Select a country.',
  }),
}))

const form = useForm({
  validationSchema: formSchema,
})

const onSubmit = form.handleSubmit((values) => {
  console.log('Form submitted!', values)
  toast('You submitted the following values:', {
    description: h('pre', { class: 'mt-2 rounded-md bg-neutral-900 p-4 w-full' }, h('code', { class: 'text-code-foreground' }, JSON.stringify(values, null, 2))),
  })
})
</script>

<template>
  <form class="w-full max-w-sm" @submit="onSubmit">
    <FieldGroup>
      <VeeField v-slot="{ componentField, errors }" name="country">
        <Field :data-invalid="!!errors.length">
          <FieldLabel for="form-native-select-country">
            Country
          </FieldLabel>
          <NativeSelect
            id="form-native-select-country"
            v-bind="(componentField as any)"
            :aria-invalid="!!errors.length"
          >
            <NativeSelectOption value="">
              Select a country
            </NativeSelectOption>
            <NativeSelectOption value="us">
              United States
            </NativeSelectOption>
            <NativeSelectOption value="uk">
              United Kingdom
            </NativeSelectOption>
            <NativeSelectOption value="ca">
              Canada
            </NativeSelectOption>
          </NativeSelect>
          <FieldDescription>
            Select a country
          </FieldDescription>
          <FieldError v-if="errors.length" :errors="errors" />
        </Field>
      </VeeField>

      <Field>
        <Button type="submit" class="w-full">
          Submit
        </Button>
      </Field>
    </FieldGroup>
  </form>
</template>

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>