Helper Text & Error States

Learn how to add helper text and handle error states in your checkboxes.

Example

Required Checkbox

This field is required

Checkbox with Error

Please accept the terms

Usage

With Helper Text

<Checkbox helperText="Optional additional information">
  With Helper Text
</Checkbox>

With Error State

<Checkbox 
  error={true}
  errorMessage="This field is required"
  required
>
  Error State
</Checkbox>

Combined with Validation

function ValidatedCheckbox() {
  const [checked, setChecked] = useState(false);
  const [error, setError] = useState(false);
 
  const handleChange = (newChecked: boolean) => {
    setChecked(newChecked);
    setError(!newChecked);
  };
 
  return (
    <Checkbox 
      checked={checked}
      onChange={handleChange}
      error={error}
      errorMessage="You must accept the terms"
      required
    >
      Accept Terms
    </Checkbox>
  );
}

Props

Prop	Type	Description
`helperText`	`string`	Additional information displayed below the checkbox
`error`	`boolean`	Whether the checkbox is in an error state
`errorMessage`	`string`	Error message displayed when error is true

Best Practices

Use clear and concise helper text
Display error messages that help users fix the issue
Consider using validation on form submission
Keep error messages close to their respective checkboxes
Use consistent error styling across your form

Helper Text & Error States

On this page