Forms · astro-ui · Radio

Radio

Native radio button with custom circle — group via shared name.

Radio mirrors Checkbox with a circle-and-dot indicator. Group behavior comes from the native shared name attribute — zero JS, perfect announcements.

← All components

Features

  • Native group behavior via shared name
  • Circle + dot visual
  • 5 sizes, 9 color variants
  • Disabled/invalid states

Usage

---
import { Radio } from "astro-ui";
---

<Radio name="plan" value="free" checked>Free</Radio>
<Radio name="plan" value="pro">Pro</Radio>

Demos

Group

<Radio name="plan" value="free" checked>Free</Radio>
<Radio name="plan" value="pro">Pro</Radio>
<Radio name="plan" value="ent" disabled>Enterprise</Radio>

API

Props

PropTypeDefaultDescription
name / valuestring—Native group + value.
checkedbooleanfalseInitial selection.
disabled / invalid / requiredbooleanfalseStates.
size"xs" | "sm" | "md" | "lg" | "xl""md"Scale.
variant"primary" | … | "inherit""primary"Accent color.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.
ariaLabelstring—Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • Native <fieldset> + <legend> name the group; <input type="radio"> handles selection
  • Arrow keys move between options (platform behavior)
  • aria-invalid + aria-describedby for validation

FAQ

How do groups work?

Exactly like HTML: same name across Radios forms the group. The browser handles mutual exclusion and arrow-key navigation.

Changelog

Version history mentioning Radio.

v0.1.0 — 2026-11-11
added
  • Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.