Free Astro Components

The checkbox component allows users to select one or more options from a set of choices. It supports various configurations and customization options.

Import

To use the checkbox component, first import it into your project:

---
import { Checkbox } from 'free-astro-components'
---

Usage

Here’s how you can use the checkbox component in your Astro project:

Basic Usage

Checkbox

States

The component supports different states to indicate whether it is checked or unchecked.

---
import { Checkbox } from 'free-astro-components'
---

<Checkbox label="Checkbox unchecked" />
<Checkbox label="Checkbox checked" checked />
<Checkbox label="Checkbox unchecked disabled" disabled />
<Checkbox label="Checkbox checked disabled" checked disabled />
<Checkbox label="Checkbox error" error />

Props

Attribute	Type	Description	Default
label	`string`	The text label associated with the checkbox.	-
checked	`boolean`	Applies a checked state if `true`.	`false`
disabled	`boolean`	Disables the checkbox if `true`.	`false`
error	`boolean`	Applies an error class if `true`. Useful for indicating validation errors.	`false`
class	`string`	CSS class for custom styling.	-
other	`any`	Any other props will be passed to the `checkbox` element	-

Accessibility

Keyboard Accessibility: Ensure that the checkbox can be toggled using keyboard interactions (e.g., Space key).
ARIA Attributes: Use aria-checked to indicate the state of the checkbox and aria-disabled for the disabled state.
Labeling: Ensure that each checkbox has a label associated with it for screen readers.