Radio Button React component
An accessible, animated radio group with a springy dot, a ripple on select, focus ring, optional descriptions and a selectable card variant.
About the Radio Button component
Radio Button is an accessible, animated radio group: a springy dot fills the selected option with a ripple, and each option can have a description and be disabled on its own. The card variant turns every option into a selectable card, which suits plan and shipping pickers.
It renders real radio inputs with a shared name inside a radiogroup, so arrow keys move between options and the value is submitted with a regular form.
When to use it
Use Radio Button when people must pick exactly one of a few options and should see them all at once: plans, delivery methods, payment options, survey answers.
With more than five or six options, use Select; for two to four short options switched often, Segmented Control is more compact.
Installation
Add the Radio Button component to your project with the shadcn CLI. It lands in components/radio-button.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/radio-buttonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<RadioButton /> accepts 21 props, all optional.
| Prop | Type | Default |
|---|---|---|
| options | { value: string; label: string; description?: string; disabled?: boolean }[] | DEFAULT_OPTIONS |
| value | string | — |
| defaultValue | string | — |
| onValueChange | (value: string) => void | — |
| name | string | — |
| label | string | — |
| direction | "vertical" | "horizontal" | "vertical" |
| variant | "default" | "card" | "default" |
| disabled | boolean | false |
| size | number | 20 |
| borderWidth | number | 1.5 |
| borderColor | string | "color-mix(in srgb, currentColor 32%, transparent)" |
- options{ value: string; label: string; description?: string; disabled?: boolean }[]Default: DEFAULT_OPTIONS
- valuestring
- defaultValuestring
- onValueChange(value: string) => void
- namestring
- labelstring
- direction"vertical" | "horizontal"Default: "vertical"
- variant"default" | "card"Default: "default"
- disabledbooleanDefault: false
- sizenumberDefault: 20
- borderWidthnumberDefault: 1.5
- borderColorstringDefault: "color-mix(in srgb, currentColor 32%, transparent)"
Show all 21 propsShow fewer
| accentColor | string | "#F2A841" |
| dotColor | string | "#0A0A0A" |
| labelColor | string | "currentColor" |
| helperColor | string | "color-mix(in srgb, currentColor 55%, transparent)" |
| ringColor | string | "color-mix(in srgb, #F2A841 30%, transparent)" |
| ringWidth | number | 3 |
| cardRadius | number | 16 |
| duration | number | 0.2 |
| className | string | — |
- accentColorstringDefault: "#F2A841"
- dotColorstringDefault: "#0A0A0A"
- labelColorstringDefault: "currentColor"
- helperColorstringDefault: "color-mix(in srgb, currentColor 55%, transparent)"
- ringColorstringDefault: "color-mix(in srgb, #F2A841 30%, transparent)"
- ringWidthnumberDefault: 3
- cardRadiusnumberDefault: 16
- durationnumberDefault: 0.2
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Radio Button FAQ
- How do I show options as cards?
- Set variant="card": each option becomes a bordered card with its label and description, highlighted when selected.
- Can the options sit in a row?
- Yes, direction="horizontal" lays them out side by side; the default is vertical.
- Does it submit with a form?
- Yes. Set name and the selected option's value is submitted like any native radio group.
- Can I disable one option?
- Set disabled: true on that option; disabled on the component disables the whole group.
