Checkbox
Checkboxes allow the user to select one or more options from a list of options.
Import
import { Checkbox } from '@dynatrace/strato-components-preview/forms';
Use cases
Variants
The checkbox can be in either of the following states: checked
, unchecked
,
or indeterminate
, shown in this example.
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.
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.
Props
CheckboxProps
Signature:
export declare type CheckboxProps = & ( | );
CheckboxBaseProps
, , , , , ,
Name | Type | Default | Description |
---|---|---|---|
formValue? | - | A string representing the value used for the checkbox. When submitted in a form, it is only submitted if checked, with the set value. If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value. | |
disabled? | false | Whether the checkbox is disabled. If true, the checkbox cannot be interacted with and is not submitted in a form. | |
required? | false | Whether the checkbox is required or not. |
CheckboxControlledProps
Name | Type | Default | Description |
---|---|---|---|
value | | | - | Whether the checkbox is checked or not. If present, it indicates that the checkbox is checked by default (when the page loads). If false, the checkbox is not submitted in a form. |
name? | - | The name used for the checkbox. This is submitted along with the value when the form data is submitted. If the name is undefined or empty, the input's value is not submitted with the form. | |
onChange | (checked: , event?: <>) => | - | Handler that is called when the checked attribute changes. |
CheckboxUncontrolledProps
Name | Type | Default | Description |
---|---|---|---|
defaultValue? | | | - | Whether the (uncontrolled) checkbox is checked by default or not. |
name | - | The name used for the checkbox. This is submitted along with the value when the form data is submitted. If the name is undefined or empty, the input's value is not submitted with the form. |