Radio Group

Accessible, high-fidelity selection cards built on Radix UI's Radio Group primitive.

Usage

Use the Radio Group when you want to make a selection stand out, especially in pricing tables, settings, or onboarding flows. By using Radix UI primitives, these cards support full keyboard navigation and ARIA attributes for accessibility.

Content

Plan Selection

A standard radio group for choosing subscription tiers.

Spec

Primitive: Built on `@radix-ui/react-radio-group`.
Border: 2px solid #E5E5E5 (Default), Black/Secondary (Selected).
State: Utilizes `data-[state=checked]` for selection styling.
Keyboard: Supports arrow keys for selection and tab for focus.
Icon: Custom circular indicator with nested ring animation.

Anatomy

TITLE LABEL

HIGHLIGHT DESCRIPTION TEXT

RADIO GROUP ITEM