Checkbox

Checkboxes allow the user to select one or more options from a list of options.

OverviewPropertiesUsage

Import

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

Use cases

CodeSandbox

Variants

The checkbox can be in either of the following states: checked, unchecked, or indeterminate, shown in this example.

CodeSandbox

Control the state

The checkbox 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 checkbox changes. You also need to assign the value from the state to the checkbox by setting the checked prop.

CodeSandbox

Validate

This example shows how you can validate the checkbox using the react-hook-form package, which handles error messages. For connecting the form with the checkbox 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 connect the checkbox'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.

CodeSandbox