Switch

Toggle on/off untuk state yang berubah langsung. Support label inline dan ukuran sm/md.

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

Gunakan Switch untuk preferensi yang langsung aktif/nonaktif saat diubah. Untuk persetujuan form sebelum submit, tetap gunakan Checkbox.

Default

Aktifkan notifikasi push

<Switch label="Aktifkan notifikasi push" defaultChecked />

Controlled

Auto-save dokumen

Status: ON

const [enabled, setEnabled] = useState(true);

<Switch checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />

Sizes

SmallMedium

<Switch size="sm" label="Small" />
<Switch size="md" label="Medium" />

Disabled

Disabled OFFDisabled ON

<Switch disabled label="Disabled OFF" />
<Switch disabled defaultChecked label="Disabled ON" />

Prop	Type	Default	Description
label	`ReactNode`	—	Label teks di samping switch.
size	`"sm" \| "md"`	`"md"`	Ukuran track dan thumb.
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

Track aktif + focus ring

--border-subtle

Track border default

--bg-surface

Thumb/background pasif

--text-main

Warna label