Switch

Stable

A control that allows the user to toggle between checked and not checked.

Examples

Default

tsx
<div className="flex items-center space-x-2">
  <Switch id="defense-mode" />
  <label htmlFor="defense-mode" className="text-sm font-medium text-slate-200">
    Active Defense System
  </label>
</div>

Neon Variant

tsx
<Switch variant="neon" defaultChecked />

API Reference

PropertyDescriptionTypeDefault
variantThe visual style variant."default" | "neon""default"
checkedThe controlled checked state.boolean-
onCheckedChangeEvent handler called when the state changes.(checked: boolean) => void-