Switch
A control that allows the user to toggle between checked and not checked.
Idle (on)
Hover (on)
Idle (off)
Hover (off)
Disabled (on)
Disabled (off)
Basic example
The most basic use-case involves using a FormControlLabel
and a Switch
component, both of which are exported.
Wrapping the Switch
component in a FormControlLabel
will make it possible to click on the text and toggle the value, and display text next to it with the proper design features.
import {
Switch,
FormControlLabel
} from '@streamelements/frontend-ui';
// ...
<FormControlLabel>
<Switch />
Toggle
</FormControlLabel>
Props
Switch
Name | Type | Default value | Description |
defaultChecked | boolean | false | When true, the initial state will be checked |
checked | boolean | – | The controlled state of component. Must be used in conjunction with onCheckedChange |
onCheckedChange | Function | – | Callback function to be called when the state changes (checked: boolean) => void |
disabled | boolean | – | When true, prevents user interaction with the component. |
required | boolean | – | When true, the user must check the switch before the parent form can be submitted. |
name | string | – | The name of the switch. Submitted with its parent form. |
value | string | on | The value given as data when submitted with a name . |
FormControlLabel
Check out the Form Control Label page