Switch

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
checked
boolean
shows a toggled-on switch
false
color
orange | green
track color (from Switch.colors)
orange
disabled
boolean
standard input disable flag
false
error
boolean
error state flag
false
labelAlign
left | right
label position (from Switch.labelAligns)
right
size
small | large
switch 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.

Error states are engaged with the error flag. This is useful when tags are used from within a form