Checkbox

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

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

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

Default

Saya setuju dengan syarat layanan

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

Controlled

Aktifkan notifikasi email

Status: nonaktif

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

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

Sizes

Small checkboxMedium checkbox

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

Group of options

Email updatesProduct announcementMarketing newsletter

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

Disabled

Disabled uncheckedDisabled checked

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

Prop	Type	Default	Description
label	`ReactNode`	—	Label teks di samping checkbox.
size	`"sm" \| "md"`	`"md"`	Ukuran control.
checked	`boolean`	—	Controlled checked state.
defaultChecked	`boolean`	—	Uncontrolled initial state.
disabled	`boolean`	`false`	Nonaktifkan interaksi.
...rest	`InputHTMLAttributes (kecuali type, size)`	—	Atribut native input checkbox (name, value, onChange, required, dsb).

--color-primary

Checked fill dan focus ring

--border-subtle

Border unchecked

--text-main

Warna label

--radius-sm

Radius box checkbox