Switch

A toggle switch for boolean values, rendered as an accessible button with role="switch".

Installation

npx dafink-ui add switch

Demo

Email notifications

Receive updates about your account.

Dark mode

Analytics

Props

Name	Type	Default	Description
checked	boolean	-	Controlled checked state.
onCheckedChange	(checked: boolean) => void	-	Callback fired when the switch is toggled.
label	string	-	Visible label rendered beside the switch.
hint	string	-	Helper text rendered below the label.
disabled	boolean	false	Disables the switch.
id	string	auto	HTML id for the switch button; auto-derived from label if omitted.

Accessibility

Switch renders a native <button role="switch"> with aria-checked mirroring the controlled checked prop: no custom keyboard handling, Enter/Space toggle it via native button semantics, and it sits in normal Tab order as a single stop, no roving tabindex or arrow keys. label is linked via htmlFor/id, and hint is linked via aria-describedby.