Switches
On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
Switches are identical in function to the Checkbox component, they just present a different UI / UX paradigm.
<Switch defaultChecked label="Pizza" />
function Example() {
const [checked, setChecked] = React.useState(false);
return (
<Switch
checked={checked}
onChange={(evt) => setChecked(!!evt.currentTarget.checked)}
label="Cookies"
/>
);
}
<Switch>Icecream</Switch>
<>
<Switch disabled label="Disabled" />
<Switch disabled defaultChecked label="Disabled" />
</>
Switch
A Switch component.