Switch

For convenience, <Switch> is provided as an alias for <Checkbox type="switch">.

A <Switch> functions exactly the same a normal checkbox and most of the same props are supported.

However, users expect checkboxes to be a part of a form with a submit button, while switches are usually expected to be automatically 'saved'.

Alignment

You can align the switch to the left using align="left" (default is "right")

Button style

Use button and small props to display as a button.

Inactive state

Use state="inactive" for a focusable, screen-readable, tooltip-friendly replacement for disabled. See <Checkbox> for the full pattern (including the tooltip example).

Controlled mode

You can bind a switch to a boolean state using the checked prop and update your state every time the onChange event is triggered.