Components
Switch
Control that allows users to turn on or off item
Selected Theme
Select brand or tribe name to preview style
Default
Usage
Switches are special checkboxes used for binary states such as on / off. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.
import { Switch } from 'legion-ui';
Variant
Legion have three variant of switch
Basic
Here’s the usage of Switch with its state being false at default.
<Switch />
Label
You can provide a label to the switch with label.
<Switch label="Enable" size="md" checked /><Switch label="Enable" size="sm" />
Disabled
Make switch look inactive by adding the disabled.
<Switch label="Enable" size="md" disabled /><Switch label="Enable" size="sm" disabled />
Attribute
You can customize switch with attributes, switch in legion have only one attribute which is size
Size
The switch has two available sizes, md and sm.
<Switch size="md" /><Switch size="sm" />
Props
| property | propType | required | default | description |
|---|---|---|---|---|
| checked | boolean | - | false | Checked state of the switch |
| disabled | boolean | - | false | Disabled state of switch |
| label | string | - | - | Adds helper text beside your switch element |
| size | sm | md | - | md | Changes the size of the switch |
| style | object | - | - | The style prop lets you style elements inline |
Do you have feedback?
Please let us know to make it better