Switch

An on or off setting that takes effect right away. Use a Checkbox when the change waits for a Save button.

Design

Explore the component in its original Figma context, including all variants, states, and visual configurations. The table below lists the Figma component's properties, which differ from the React props. Text is one boolean where the code takes two nodes (checkedChildren and unCheckedChildren), because Figma draws a fixed number of children and turns a layer on instead. State includes the disabled drawing, and Figma's Default size is the code's medium. The Code tab lists the React props.
Switch, Switch Text & Icon
Switch Content Text
Switch Content Check
Switch Content Default, Switch Content Small