Install the component dependency:

Include a React component in your project:

checkedbooleanshows a toggled-on switchfalse
colororange | greentrack color (from Switch.colors)orange
disabledbooleanstandard input disable flagfalse
labelAlignleft | rightlabel position (from Switch.labelAligns)right
sizesmall | largeswitch size (from Switch.sizes)large

There is no internal state for the switch component. The containing app will take care of how it maintains and changes the state of the Switch with the checked and onClick props.

Switches come in two sizes.

Switches come in two colors. Orange is default.

Labels will provide additional context around the usage of the switch.

Each switch may be displayed as disabled. Do not use disabled treatment for non-disabled switches.

To specify the light theme, wrap your components in a Theme component.