Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Toggle
Used to toggle on/off desired feature.
Toggle Props
| Name | Use | Type | Definition |
| checked | optional | boolean | Toggle value. |
| disabled | optional | boolean | Toggle is disabled. |
| helperTextOff | optional | string | Helper text when toggle is not checked. |
| helperTextOn | optional | string | Helper text when toggle is checked. |
| id | optional | string | Adds an id for the input in the toggle component. |
| label | optional | string | Label for the toggle. |
| name | optional | string | Adds a name for the input in the toggle component. |
| onChange | optional | (checked: boolean) => void | Function that gets called when the toggle value changes. |
| readOnly | optional | boolean | Toggle is read-only (same as disabled). |
| small | optional | boolean | Small toggle size. |
| className | optional | string | Adds any class to the parent container. |
Examples
Toggle
On/Off
Sizes
Medium
This is default size
Small
For this size the small property must be passed to it
Variants
With label
This variant can be used by implementing Toggle component with label attribute, in case of small size label is not showing
I am label
With helper texts
This variant can be used by implementing Toggle component with helperTextOn and helperTextOff attributes
Off
Off
States
Disabled
Toggle component have the following states
I am label
Off
Off
I am label
On
On