Components / forms

Switch

Binary Toggle - Mechanical Slide, Amber When On

01 Preview

02 Usage

On/off toggle with a mechanical slide - no bounce. Track goes amber when on.

<Switch label="Reduce motion" checked={reduce} onChange={(e) => setReduce(e.target.checked)} />

Use for immediate settings; use Checkbox for form submissions / lists.

hint and error work as they do on Field — the error replaces the hint, announces via role="alert" and marks the control aria-invalid.

03 Props

PropTypeDefaultNotes
label React.ReactNode — Text shown beside the toggle.
hint React.ReactNode — Helper text below the control.

Also accepts every attribute of React.InputHTMLAttributes<HTMLInputElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Switch } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';