Switch

A control that allows the user to toggle between checked and not checked.

Dependencies

• @radix-ui/react-switch (opens in a new tab) - A primitive for creating accessible switch components.

Usage

Variants

Switches come in two variants: default and emphasis.

Sizes

Switches come in two sizes: sm and lg. The default size is lg.

Disabled

Switches can be disabled by adding the disabled prop. Disabled switches can't be interacted with and have a lower opacity.

With Icon

With Supporting Text

Form

API Reference

To see the full API docs of Switch component visit Radix Docs (opens in a new tab).

Switch