Switch

A control that allows the user to toggle between checked and not checked.

Idle (on)

Label

Hover (on)

Label

Idle (off)

Label

Hover (off)

Label

Disabled (on)

Label

Disabled (off)

Label

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.

Toggle

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