softwares/components-doc/docs/components/checkbox.md#L1-120

Checkbox

Introduction

The Checkbox component is a versatile input control for binary choices, supporting labels, descriptions, validation states, indeterminate state, and full reactivity via Pulse signals. It is commonly used for forms, preferences, permissions, and bulk selection patterns.

Import

import { Checkbox } from '@odyssee/components';

LiveCodeEditor Examples

Basic Checkbox

Code Éditable

Résultat

Checkbox with Description

Code Éditable

Résultat

Sizes

Code Éditable

Résultat

Validation States

Code Éditable

Résultat

Indeterminate State

Code Éditable

Résultat

Reactive Value

Code Éditable

Résultat

Select All Pattern

Code Éditable

Résultat

Props Table

Prop	Type	Default	Description
checked	boolean | Signal<boolean>	false	Checked state (can be reactive signal).
indeterminate	boolean | Signal<boolean>	false	Indeterminate state (for partial selection).
disabled	boolean	false	Disables the checkbox.
required	boolean	false	Marks the checkbox as required.
label	string	—	Label displayed next to the checkbox.
description	string	—	Optional description below the label.
error	string | boolean	—	Error state or error message.
success	string | boolean	—	Success state or success message.
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Size of the checkbox and label.
labelPosition	"left" | "right"	"right"	Position of the label relative to the checkbox.
name	string	—	Name attribute for form integration.
value	string | number	—	Value attribute for form integration.
onChange	(checked: boolean) => void	—	Callback fired when checked state changes.
className	string	—	Additional CSS classes for the root element.
id	string	auto-gen	Unique ID for the checkbox input.
...rest	any	—	Other props are spread to the root element.

Implementation Notes

• Fully reactive: supports Pulse signals for checked and indeterminate states.
• Indeterminate state is managed via DOM property and updated reactively.
• Validation states (error/success) affect border and text color.
• Supports all common accessibility attributes and keyboard navigation.
• Label and description are styled for clarity and accessibility.
• Size and label position are customizable.
• Can be integrated into forms via name and value props.

Accessibility

• Uses native <input type="checkbox"> for full accessibility.
• Label is linked via for and id attributes.
• Supports required, disabled, and aria attributes.
• Indeterminate state is visually indicated and programmatically set.
• Error and success messages are announced via text.

Best Practices

• Use checked and onChange for controlled usage; prefer signals for reactivity.
• Use indeterminate for bulk selection patterns (e.g., "Select all").
• Provide clear labels and descriptions for context.
• Use validation states to guide user input.
• Avoid disabling checkboxes unless necessary; provide visual cues if disabled.
• Group related checkboxes for better UX.

Related Links

• Pulse Framework documentation
• FormGroup component
• Radio component
• Toggle component