Switch

Import
import { Switch } from "reshaped";
import type { SwitchProps } from "reshaped";
Related components
Full keyboard navigation
Can be controlled and uncontrolled
Automatic integration with FormControl utility


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 a controlled or uncontrolled component. By default, Switch is uncontrolled and lets you define its default state using the defaultChecked property. In this case, all change events are handled automatically.

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

States

To make Switch non-interactive, you can use the disabled flag. Like in native checkbox fields, it will prevent the onChange handler from triggering.

Previous
Next