Switch

Switches toggle the state of a single item. Compared to the InputCheckbox, their changes usually apply without any additional submission.
Full keyboard navigation
Can be controlled and uncontrolled
Automatic integration with FormControl utility
Similar components:
CheckboxRadioSelect


Usage

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

Same as 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.

In case you need to manually control the state of the field, you can use value property. That will give you full control of the component value and will stop handling the value automatically. You will have to update the state using onChange handler and will be able to add custom logic before that happens.

States

In order to make Switch non-interactive, you can use disabled flag. Like in native checkbox fields, 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
Previous
Next