Skip to main content

Switch

A controlled boolean input.

http://localhost:3000
<Switch aria-label="switch" />

Usage​

Label​

Pass in a string as a child to render a label for the switch.

http://localhost:3000
<Switch>Label</Switch>

Size​

Small​

Set the component size to small

http://localhost:3000
<Switch size="small">Label</Switch>

Controlled​

A switch's state can be controlled by a parent React component by setting the isSelected prop and passing a handler to the onChange prop.

http://localhost:3000
function ControlledExample() {
  const [selected, setSelected] = React.useState(false);

  return <Switch aria-label="switch" isSelected={selected} onChange={setSelected} />;
}

Disabled State​

Set the isDisabled prop to prevent a user from selecting a switch.

http://localhost:3000
<Switch isDisabled>Disabled</Switch>

Props​

as?The root element to be rendered