fetaUI
GitHub

Radio Group

Pick exactly one. A surface circle that fills to an ink disc with a dot.

FreeWeb and Mobile2 variantsMotion

Preview

npx shadcn add @fetaui/radio
Playground
Notify me by
List
Notify me by
Choice card
Shipping
Invalid
Choose one
Pick an option to continue.
Disabled
Locked
Description
Density
Density
Plan cards
PlanBilled yearly
Plan
Fieldset
Subscription planYearly and lifetime plans save more.
Subscription
Change any time
Disabled options
Options
Options
Option 2 and 3 need an upgrade
Required
NotificationsRequired
Notifications
Choose how you want to be notified.
Review
Review mode
Review mode
Plan
PlanShips monthly
Plan
Delivery
DeliveryTo Toronto, ON
Delivery
Variant
Icons animation
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/radio

List

The default, for a few short options.

Notify me by
Variant
Disabled
Motion

Accessibility

  • Native radios in a labelled radiogroup.
  • Selection moves and never toggles off.

Motion

  • Hover breathes a 5% pulse on a 1.4 s loop.
  • Press squeezes to 0.86, then a ripple rolls out once.
  • The dot pops in on select.
  • With reduced motion, the pulse is a static halo and there is no ripple.

Responsive behavior

  • 18 px on Web and 22 px on Mobile, with larger cards.

Performance

  • The ripple is a CSS element mounted once per press, and the hover pulse is CSS too.
  • Only the dot uses Motion.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import RadioGroup from @/components/fetaui/radio. It renders native radios, so arrow keys work without extra code.
  • options takes value, label, description, icon, meta and disabled. variant="card" makes each option a card.
  • There is no required prop. Show error from your own validation.
  • Without a name, the group generates one. Pass name when it posts in a form.
/docs/components/radio/markdown
PreviousCheckbox
NextSwitch

Related

CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.SelectComponentChoose one value from a list. The list grows out of the trigger and the highlight glides.SwitchComponentTurns a setting on or off and applies it at once.FieldsetComponentFields grouped under a legend, in an inset card on the tray.Toggle GroupComponentToggles on one tray, for a single choice or several.