Checkbox

Single checkbox

Send me a summary email

import { Checkbox } from '@eekodigital/raster';

<Checkbox label="Send me a summary email" name="email_summary" />

CheckboxGroup

Notify me about

New reports

Criterion status changes

Report locks and unlocks

<CheckboxGroup legend="Notify me about">
  <Checkbox label="New reports" name="notify_reports" />
  <Checkbox label="Criterion status changes" name="notify_status" />
  <Checkbox label="Report locks and unlocks" name="notify_locks" />
</CheckboxGroup>

With hint and error

Notify me aboutYou can change this later in settings.Error: Select at least one notification type.

New reports

Criterion status changes

<CheckboxGroup
  legend="Notify me about"
  hint="You can change this later in settings."
  error="Select at least one notification type."
>
  <Checkbox label="New reports" name="notify_reports" />
  <Checkbox label="Criterion status changes" name="notify_status" />
</CheckboxGroup>

Props — Checkbox

Prop	Type	Description
`label`	`string`	Label rendered to the right of the checkbox.
`checked`	`boolean \| ‘indeterminate’`	Controlled checked state.
`defaultChecked`	`boolean`	Initial checked state (uncontrolled).
`onCheckedChange`	`(checked: boolean \| ‘indeterminate’) => void`	Called when checked state changes.
`disabled`	`boolean`	Disables the checkbox.
`name`	`string`	Form field name for submission.

Props — CheckboxGroup

Prop	Type	Description
`legend`	`string`	Group label rendered as a `<legend>`.
`hint`	`string`	Optional hint text.
`error`	`string`	Validation error message for the group.
`children`	`ReactNode`	`Checkbox` components.