Live Docs

Navigation

Forms /

stable

Select

Dropdown single-select dengan keyboard nav, controlled/uncontrolled mode, dan custom option state.

import { Select } from "@naraya/ui";

Overview

Pakai Select untuk memilih satu opsi dari daftar. Komponen ini mendukung navigasi keyboard (arrow, enter, escape), placeholder, size variant, dan error state. Butuh pilih banyak nilai (multi-select / tags) atau opsi yang bisa dicari? Pakai Combobox dengan prop multiple.

Examples

Default

<Select options={cityOptions} placeholder="Pilih kota" />

Controlled

Selected: bandung

const [value, setValue] = useState("bandung");

<Select options={cityOptions} value={value} onChange={setValue} />

Clearable

Selected: bandung

<Select clearable options={cityOptions} value={value} onChange={setValue} />

Uncontrolled with defaultValue

<Select options={cityOptions} defaultValue="surabaya" />

Sizes

<Select size="sm" options={cityOptions} />
<Select size="md" options={cityOptions} />
<Select size="lg" options={cityOptions} />

Error and disabled option

Paket wajib dipilih.

<Select error options={mixedOptions} placeholder="Pilih paket" />

Disabled select

<Select disabled options={cityOptions} defaultValue="jakarta" />

Props

PropTypeDefaultDescription
options*SelectOption[]—Daftar opsi: { value, label, disabled? }.
valuestring—Controlled value.
defaultValuestring—Uncontrolled initial value.
onChange(value: string) => void—Callback saat opsi dipilih.
placeholderstring"Pilih..."Teks saat belum ada nilai.
size"sm" | "md" | "lg""md"Ukuran trigger.
clearablebooleanfalseTampilkan tombol ✕ untuk reset pilihan saat ada nilai.
errorbooleanfalseError style pada trigger.
disabledbooleanfalseNonaktifkan interaksi.
idstring—Id trigger/combobox element.
namestring—Metadata nama field (jika dibutuhkan di layer form).
classNamestring—Class tambahan wrapper select.

Tokens Used

--bg-surface

Trigger dan panel background

--border-subtle

Border trigger/panel

--color-primary

Focus, active option, dan highlight accent

--text-main

Warna teks opsi aktif/default

--text-muted

Placeholder dan secondary text

Accessibility

  • Trigger memakai role='combobox' dengan aria-expanded dan aria-haspopup='listbox'.
  • Panel memakai role='listbox' dan setiap opsi role='option'.
  • Keyboard support: ArrowUp/ArrowDown, Enter/Space, Escape, Tab close.
  • Pasangkan dengan label terpisah via id/aria-labelledby jika dipakai dalam form kompleks.