Live Docs

Forms /

stable

Switch

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

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

Overview

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

Examples

Default

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

Controlled

Status: ON

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

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

Sizes

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

Disabled

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

Props

PropTypeDefaultDescription
labelReactNodeLabel teks di samping switch.
size"sm" | "md""md"Ukuran track dan thumb.
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

Track aktif + focus ring

--border-subtle

Track border default

--bg-surface

Thumb/background pasif

--text-main

Warna label

Accessibility

  • Komponen memakai role='switch' pada native checkbox input.
  • Label dibungkus langsung supaya area klik lebih besar.
  • Untuk toggle penting, tampilkan state saat ini secara tekstual di dekat switch.
  • Jangan gunakan switch untuk aksi yang butuh konfirmasi submit.