Forms

Switch

A setting that is on or off and takes effect right away, like "Draft as I scroll" or turning Makado Replies off.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`label`Required	`string`
`hideLabel`	`boolean`
`ariaLabel`	`string`	The name read out when the visible label alone is ambiguous ("Filming on the board" for a row that shows "On the board").
`description`	`string`	A quieter line under the label.
`checked`	`boolean`
`defaultChecked`	`boolean`
`onChange`	`(checked: boolean) => void`
`size`	`'M' \| 'L'`
`disabled`	`boolean`
`className`	`string`

Guidelines

A setting that is on or off and takes effect right away, like "Draft as I scroll" or turning Makado Replies off. The track fills with the accent when it's on and the thumb (the raised selected style) slides across; the label always says what the setting does, so the state never relies on color alone.

Provide: label, checked with onChange(checked) (or defaultChecked), optional description (a quieter line under the label), size (M, or L on phones), disabled, and hideLabel only where the label is shown nearby.

Use a Switch for a setting that applies the moment it changes. Use a Checkbox to pick items in a list or to agree to something before pressing a button.
Say what it does when on, in sentence case ("Hide ones you answered"), not "Enable" or "Toggle".
Keyboard: Tab reaches it and Space flips it; it is announced as a switch, on or off.
With reduced motion the thumb moves without sliding.