Skip to content
FelicityUI

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Billing cycle

Installation

terminal
npx felicityui add radio-group --platform react

Usage

example.tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="option-one">
  <RadioGroupItem value="option-one" label="Option One" />
  <RadioGroupItem value="option-two" label="Option Two" />
</RadioGroup>

Composition

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

Default

Billing cycle

Description

Items with helper text under the label.

Notify me about…

Choice card

Wrap the control in a clickable card surface.

Fieldset

Legend and description on the group.

Billing cycle

You can change this later in settings.

Disabled

disabled on RadioGroup disables all items.

Plan

Invalid

aria-invalid and data-invalid on the group.

Shipping method

RTL

dir=rtl

دورة الفوترة

API Reference

PropTypeDefaultDescription
valuestring—Controlled selected value.
defaultValuestring—Uncontrolled initial value.
onValueChange(value: string) => void—Called when the selected value changes.
labelReactNode—Fieldset legend.
descriptionReactNode—Group helper text.
errorReactNode—Group error message; sets invalid styling.
invalidboolean—Marks the group invalid.
orientationvertical | horizontalverticalLayout direction for items.
disabledboolean—Disables all items.
RadioGroupItem.valuestring—Item value.
RadioGroupItem.labelReactNode—Optional item label.
RadioGroupItem.descriptionReactNode—Optional item helper text.

Accessibility

WCAG 2.2 AA

  • Native radio inputs sharing a name.
  • Fieldset/legend or labelled items.
  • Visible focus-visible ring.
  • aria-invalid and data-invalid when invalid.

Platform notes

React

Native HTML radios with Felicity semantic tokens. Copper indicator when selected — not Base UI / Radix runtime.

  • Client component (value state).
  • Uses data-slot=radio-group|radio-group-item|radio-group-indicator.
  • Field chrome uses data-slot=field|field-label|field-description.
  • Supports value / defaultValue / onValueChange; RadioItem is an alias of RadioGroupItem.