Checkbox

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

States

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

Props

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.