Checkbox

An accessible checkbox component built on top of Radix UI primitives. Supports labels, descriptions, error messages, indeterminate state, and multiple size variants.

Import

import { Checkbox } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Checkbox label="Accept terms" />

<Checkbox
  label="Receive updates"
  description="We will send you weekly newsletters."
  size="lg"
/>

<Checkbox
  label="Invalid field"
  error="This field is required"
  variant="error"
/>

<Checkbox label="Select all" indeterminate />

Props

Prop	Type	Default	Description
`label`	string	-	Label text displayed next to the checkbox.
`description`	string	-	Description text rendered below the label.
`error`	string	-	Error message to display. Automatically sets the error variant.
`indeterminate`	boolean	`false`	Whether the checkbox is in an indeterminate (partially checked) state.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size of the checkbox.
`variant`	'default' \| 'error'	`'default'`	Visual variant. Automatically set to error when an error message is provided.
`checked`	boolean	-	Controlled checked state of the checkbox.
`onCheckedChange`	(checked: boolean) => void	-	Callback fired when the checked state changes.
`disabled`	boolean	`false`	Whether the checkbox is disabled.
`id`	string	-	HTML id attribute. Auto-generated if not provided.
`className`	string	-	Additional CSS classes to apply to the checkbox root.

The component also accepts all Radix UI Checkbox.Root props except children.