Checkbox

A customizable and accessible checkbox component with advanced use cases, including form validation and multi-select preferences.

Introduction

The Checkbox component is a versatile and accessible component that supports default and advanced use cases such as multi-select preferences with form validation.

Default Use Case: Simple Checkbox

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Enable notifications

You can enable or disable notifications at any time.

Installation

Install the Checkbox component

npx axionjs-ui add checkbox

File Structure

checkbox.tsx

Advanced Use Case: Form with Multi-Select Preferences

Preferences

Option 1

Option 2

Option 3

Prop Types

Prop	Type	Default
`id`	`string`	-
`aria-label`	`string`	-
`aria-labelledby`	`string`	-
`disabled`	`boolean`	`false`
`checked`	`boolean \| 'indeterminate'`	-
`onCheckedChange`	`(checked: boolean) => void`	-

Features

Default and Disabled States:
- Use for basic toggles or read-only checks.
Multi-Select Integration:
- Handle complex forms with validation using react-hook-form and zod.
Accessible:
- Fully compliant with ARIA attributes.

Conclusion

The Checkbox component is highly customizable and accessible, making it a perfect choice for basic toggles or advanced forms.