Checkbox

The Checkbox component provides a versatile input control that supports regular, indeterminate, and card styles. It's perfect for forms, settings, and selection interfaces.

Import

import { Checkbox, CheckboxGroup } from 'h2o-library';

Basic Usage

Simple Checkbox

<Checkbox label="Remember me" />

Card Style Checkbox

<Checkbox 
  label="Select Option"
  isCard
/>

Checkbox States

<Checkbox label="Unchecked" />
<Checkbox label="Checked" checked />
<Checkbox label="Indeterminate" isIndeterminate />

Disabled States

<Checkbox label="Disabled" disabled />
<Checkbox label="Disabled Checked" disabled checked />
<Checkbox label="Disabled Card" disabled isCard />

Interactive Examples

For interactive examples including checkbox groups, state management, and more complex use cases, check out our example component:

Props

Checkbox Props

Prop	Type	Default	Description
label	string	-	The label text for the checkbox
isCard	boolean	false	Whether to use the card style
isIndeterminate	boolean	false	Whether the checkbox is in an indeterminate state
className	string	-	Additional CSS classes
disabled	boolean	false	Whether the checkbox is disabled
checked	boolean	false	Whether the checkbox is checked
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	-	Callback when checkbox changes

Plus all standard HTML input attributes except type.

CheckboxGroup Props

Prop	Type	Default	Description
label	string	-	The label for the group
checked	boolean	-	Whether the parent checkbox is checked
indeterminate	boolean	-	Whether the parent checkbox is indeterminate
onChange	(checked: boolean) => void	-	Callback when parent checkbox changes
className	string	-	Additional CSS classes
children	ReactNode	-	Child checkbox components

Design Considerations

• Supports three states: unchecked, checked, and indeterminate
• Card style for more prominent options
• Proper hover and active states for better user feedback
• Nested checkboxes with parent-child relationships
• Maintains accessibility with proper ARIA attributes
• Supports both controlled and uncontrolled usage

Accessibility

• Checkboxes are keyboard accessible (Space to toggle)
• Labels are properly associated with inputs
• ARIA attributes are automatically handled
• Focus states are clearly visible
• Color is not the only indicator of state
• Screen readers announce the current state
• Card layout maintains proper focus handling