Switch

Use the Switch to let users toggle a setting between on and off. The change takes effect immediately without requiring a separate confirmation step.

OverviewPropertiesUsage

Import

import { Switch } from '@dynatrace/strato-components/forms';

Demo

Control state

The Switch can also be controlled, meaning that you can handle the state. To do so, you need to use the onChange prop to provide a handler that is called when the internal state of the Switch changes. You also need to assign the value from the state to the Switch by setting the on prop.

Validate

This example shows how you can validate the Switch using the react-hook-form package, which handles error messages. For connecting the form with the Switch and validating, you need to register the field with custom error messages and use the useForm hook from react-hook-form. Also, by using the controlState prop, you can override the error messages and connect the Switch's error state and message to that of the form. This shows a hint in case of an error and applies proper styling to the component.