Skip to main content

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

defaultCheckedbooleanfalse
When true, the initial state will be checked
checkedboolean
The controlled state of component.
Must be used in conjunction with onCheckedChange
onCheckedChangeFunction
Callback function to be called when the state changes
(checked: boolean) => void
disabledboolean
When true, prevents user interaction with the component.
requiredboolean
When true, the user must check the switch before the parent form can be submitted.
namestring
The name of the switch. Submitted with its parent form.
valuestringon
The value given as data when submitted with a name.

FormControlLabel

Check out the Form Control Label page