Free Astro Components

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

Radio

States

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

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

<Radio label="Radio unselected" />
<Radio label="Radio selected" checked />
<Radio label="Radio unselected disabled" disabled />
<Radio label="Radio selected disabled" checked disabled />
<Radio label="Radio error" error />

Props

Attribute	Type	Description	Default
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.