Live Docs

Forms /

stable

Checkbox

Kontrol boolean untuk satu atau banyak pilihan independen. Support label inline dan ukuran sm/md.

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

Overview

Pakai Checkbox untuk pilihan non-eksklusif (boleh pilih lebih dari satu). Untuk pilihan eksklusif satu dari banyak opsi, gunakan Radio.

Examples

Default

<Checkbox label="Saya setuju dengan syarat layanan" />

Controlled

Status: nonaktif

const [checked, setChecked] = useState(false);

<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />

Sizes

<Checkbox size="sm" label="Small checkbox" />
<Checkbox size="md" label="Medium checkbox" />

Group of options

<Checkbox label="Email updates" />
<Checkbox label="Product announcement" />
<Checkbox label="Marketing newsletter" />

Disabled

<Checkbox disabled label="Disabled unchecked" />
<Checkbox disabled defaultChecked label="Disabled checked" />

Props

PropTypeDefaultDescription
labelReactNodeLabel teks di samping checkbox.
size"sm" | "md""md"Ukuran control.
checkedbooleanControlled checked state.
defaultCheckedbooleanUncontrolled initial state.
disabledbooleanfalseNonaktifkan interaksi.
...restInputHTMLAttributes (kecuali type, size)Atribut native input checkbox (name, value, onChange, required, dsb).

Tokens Used

--color-primary

Checked fill dan focus ring

--border-subtle

Border unchecked

--text-main

Warna label

--radius-sm

Radius box checkbox

Accessibility

  • Checkbox pakai native input type='checkbox' jadi keyboard dan screen reader support by default.
  • Label dibungkus langsung agar target klik luas.
  • Untuk group checkbox, gunakan fieldset/legend bila memungkinkan.
  • Jika ada error group, tampilkan helper text yang terhubung via aria-describedby.