RadioGroup

forms

Radio button group with native fieldset/legend, visually hidden native inputs, custom styled radio circles with checked dot animation, option descriptions, error state with role=alert, disabled state, and focus-visible ring. Uses role=radiogroup with aria-label.

Import

typescript
import { RadioGroup } from "packages/ui/src";

Props

RadioGroupProps

PropTypeRequired
labelstringNo
optionsRadioOption[]Yes
valuestringNo
onChange(value) => void, name?: string, error?: stringNo

Examples

RadioGroup Component

Radio button group with native fieldset, custom styled circles, descriptions, error/disabled states, and focus ring. 41st component.

Plan Selection (with descriptions)

Choose a plan

With Error

Select size
Please select a size

With Disabled Option

Deployment target

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionRadio button group with native fieldset/legend, visually hidden native inputs, custom styled radio circles with checked dot animation, option descriptions, error state with role=alert, disabled state, and focus-visible ring. Uses role=radiogroup with aria-label.
PropsRadioGroupProps (label?: string, options: RadioOption[], value?: string, onChange?: (value) => void, name?: string, error?: string)
Statesunchecked, checked, disabled, error, with-description, focus-visible
A11y
  • Native fieldset/legend for group labeling
  • role=radiogroup with aria-label
  • Native radio inputs (visually hidden) for keyboard support
  • aria-invalid when error
  • Error message has role=alert
  • Focus ring on keyboard navigation
Responsive
  • Full-width by default
  • Options stack vertically
Motion
  • Border color transition on check
  • Focus ring shadow transition
Token Dependencies
  • components.radioGroup.labelColor
  • components.radioGroup.labelFontSize
  • components.radioGroup.gap
  • components.radioGroup.radioSize
  • components.radioGroup.radioBorder
  • components.radioGroup.radioCheckedBorder
  • components.radioGroup.radioCheckedDot
  • components.radioGroup.radioDotSize
  • components.radioGroup.optionColor
  • components.radioGroup.optionFontSize
  • components.radioGroup.descriptionColor
  • components.radioGroup.descriptionFontSize
  • components.radioGroup.focusRing
  • components.radioGroup.errorColor
  • components.radioGroup.errorFontSize
  • components.radioGroup.disabledOpacity
Content Slotslabel (string), options[].label (string), options[].description (string), error (string)
CMS Bindings
  • Options from CMS enum field
  • Label from CMS schema
  • Error from CMS validation
Test Cases
  • Renders all radio options
  • Shows group label
  • Checked option has checked class
  • Calls onChange with value
  • Shows error message
  • Error has role=alert
  • Disabled option has disabled class
  • Passes className through