Checkbox
Toggle options on and off.
A checkbox allows a user to toggle a boolean option on or off.
<Checkbox name="newsletter" label="Subscribe to newsletter" />Validation
Checkboxes support the same validation functions as the other form elements. See the validation documentation for more details.
<Checkbox
name="terms"
label="I agree to the terms and conditions"
validate={(value: boolean) => {
if (!value) {
return 'You must agree to the terms and conditions';
}
}}
isRequired
/>Other props
description
A description can be added below the checkbox label to provide additional context.
You can unsubscribe at any time from your account settings.
<Checkbox
name="newsletter"
label="Subscribe to newsletter"
description="You can unsubscribe at any time from your account settings."
/>defaultSelected
The checkbox can be checked by default using the defaultSelected prop.
<Checkbox name="newsletter" label="Subscribe to newsletter" defaultSelected />isRequired
A checkbox can be marked as required by setting the isRequired prop to true.
<Checkbox name="terms" label="I agree to the terms and conditions" isRequired />isInvalid
When rendered inside a form, the checkbox will automatically enter an invalid state when its validate function returns an error message. It is also possible to manually set the invalid state with the isInvalid prop.
You must agree to the terms and conditions
<Checkbox
name="terms"
label="I agree to the terms and conditions"
errorMessage="You must agree to the terms and conditions"
isInvalid
isRequired
/>isDisabled
A checkbox can be disabled by setting the isDisabled prop to true.
<Checkbox name="option-a" label="Unchecked and disabled" isDisabled />
<Checkbox name="option-b" label="Checked and disabled" defaultSelected isDisabled />Props
| Prop | Type | Description |
|---|---|---|
name | string | The name of the field submitted with form data. |
label | ReactNode | The label displayed next to the checkbox. |
description | ReactNode | Additional context displayed below the label. |
isRequired | boolean | Whether the checkbox is required. |
isInvalid | boolean | Whether the checkbox is in an invalid state. |
isDisabled | boolean | Whether the checkbox is disabled. |
defaultSelected | boolean | Whether the checkbox is checked by default. |
validate | (value: boolean) => string | undefined | Validation function run on form submission. |