Radio

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

Import

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

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

Usage

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

Basic Usage

States

The component supports different states to indicate whether it is selected or unselected.

Props

label string The text label associated with the Radio. -
checked boolean Applies a checked state if true. false
disabled boolean Disables the Radio. 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 radio element -

Accessibility

  • Keyboard Accessibility: Ensure that the radio button can be toggled using keyboard interactions (e.g., Arrow keys for navigation and Space key for selection).

  • ARIA Attributes: Use aria-checked to indicate the state of the radio button and aria-disabled for the disabled state.

  • Labeling: Ensure that each radio button has a label associated with it for screen readers.