Switch
Switches toggle the state of a single item. Compared to the InputCheckbox, their changes usually apply without any additional submission.

Other available selection types:

Usage

All form fields have a required name property, so that's the only property you have to pass to Switch to start using it. If you need to handle its change events - add an onChange property to it.

Controlled/uncontrolled value

Like when using native inputs in React, Switch can be used as controlled or uncontrolled component. By default, Switch is uncontrolled and lets you define its default state using defaultChecked property. In this case all change events will be handled automatically.

However, it's not possible to control the input value with your product code when using an uncontrolled component. To solve this, React provides a way to define component as controlled and use checked property instead. That will give you full control of the component checked state and will stop handling the checked state automatically. Therefore, you will have to update it manually using onChange handler.

States

In order to make Switch non-interactive, you can use disabled flag. Like in native checkbox, it will prevent onChange handler from triggering.

Properties

NameTypeDefaultRequiredComment
idstring-falseCustom id
onChange({ event, name, value }) => {}-falseChange handler
namestring-true
checkedboolean, null-falseControlled checked state
defaultCheckedboolean-falseUncontrolled checked state
disabledboolean-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
inputAttributesobject-falseAttributes for the input element