Switch

On/off control built on a visually hidden checkbox. It is keyboard operable and serializes in a form, because underneath it is still an <input>.

Props

All other <input> attributes are forwarded to the hidden checkbox.

Common patterns

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

// With a label — the component already renders a <label>, so put the
// text next to it rather than wrapping it again
<label className="flex items-center gap-3 text-sm">
  <Switch name="2fa" defaultChecked />
  Require two-factor authentication
</label>

Notes

Switch and Checkbox do the same job to a browser; the difference is what the user reads into them. Use Switch for a setting that takes effect immediately, and Checkbox for something confirmed later by a submit button.

className lands on the <label> rather than the input, because that is the element you position. To resize the track itself, edit the file — the dimensions are two utilities on the <span>.