Can options have descriptions or be disabled?

Yes. Each option takes a label, an optional description and a disabled flag; disabled options are skipped by the arrow keys.

Is Radio Group free for commercial use?

Yes. Radio Group is MIT licensed: use it in any personal or commercial project and change it however you like.

Does Radio Group work with Next.js?

Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.

Can an AI coding agent install Radio Group?

Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Radio Group's props and source and get_install_command returns the exact command.

Radio Group

Roving-focus radios whose dot springs in, with a shared highlight that glides between card options.

Category: Inputs
Licence: Free, MIT
Built with: React 19, Tailwind CSS 4, Motion
Dependencies: motion, clsx, tailwind-merge

Examples

Radio Group

API reference

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Initial value when uncontrolled.
`onValueChange`	`(value: string) => void`	—
`options`	`{ value: string; label: ReactNode; description?: ReactNode; disabled?: boolean }[]`	—
`variant`	`"list" \| "cards"`	`"list"`
`aria-label`	`string`	—

About Radio Group

Radio Group gives you exclusive choices in two looks: a classic list and option cards with a shared highlight that glides to the chosen one. The dot springs in, and arrow keys move and select like a native radio group.

Radio Group is an input component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.

When to use Radio Group

Plan and pricing tier pickers.
Shipping or payment method selection at checkout.
Survey questions with a single answer.
Settings with two to six mutually exclusive options.

How it works

It uses roving tabindex, so Tab enters the group once and arrow keys move between options. The card highlight is one Motion layout element that travels between cards, which is cheaper and smoother than animating each card separately.

It is a real form control: it has an accessible name, works with the keyboard alone, shows a visible focus ring and announces its state to screen readers. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.

Customizing Radio Group

Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.

The Customize panel next to the preview lets you change variant live, and the Code tab updates to match, so the snippet you copy already carries your values.

value (string): Controlled value.
defaultValue (string): Initial value when uncontrolled.
options.
variant ("list" | "cards", default "list").
aria-label (string).

Goes well with Radio Group

These inputs pieces share its tokens and motion language, so they sit together on one page without clashing.

Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Switch: An animated React toggle switch whose thumb stretches when pressed, like a real switch
Checkbox: An animated React checkbox: the check draws itself in, the box pops, indeterminate morphs to a dash
Input: An animated React text input with icons, a shake-once error and a success check that draws in

Install Radio Group

npx shadcn@latest add https://charcoalui.com/r/radio-group.json

Radio Group is free and MIT licensed. The command copies radio-group.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.

It pairs well with Gooey, a Pro piece: Liquid UI: pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp. An SVG filter plus springs, so it works with any markup.

Frequently asked questions

Can options have descriptions or be disabled?: Yes. Each option takes a label, an optional description and a disabled flag; disabled options are skipped by the arrow keys.
How do I install Radio Group?: Run npx shadcn@latest add https://charcoalui.com/r/radio-group.json. The shadcn CLI copies radio-group.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
Is Radio Group free for commercial use?: Yes. Radio Group is MIT licensed: use it in any personal or commercial project and change it however you like.
Does Radio Group work with Next.js?: Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
Can an AI coding agent install Radio Group?: Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Radio Group's props and source and get_install_command returns the exact command.

Radio Group as Markdown · llms.txt