Components

Radio Group

Mutually exclusive options. Each Radio is a 16px ring that fills with the accent and a white dot when selected.

Selected: pro

Usage

Use it to:

  • choose exactly one of 2–6 options that should all stay visible
  • settings forms where the options need a description

Don’t use it to:

  • long lists (use Select or Combobox)
  • switching views inline in a toolbar (use SegmentedControl)
  • independent options (use Checkbox)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/RadioGroupExample.tsx
import { useState } from 'react';
import { Radio, RadioGroup } from '@krackedui/motion';

export function PlanPicker() {
  const [plan, setPlan] = useState('pro');
  return (
    <RadioGroup aria-label="Plan" value={plan} onValueChange={setPlan}>
      <Radio value="free" label="Free" />
      <Radio value="pro" label="Plus" />
      <Radio value="team" label="Business" />
    </RadioGroup>
  );
}

Examples

Horizontal

Disabled

Disable one option, or the whole group with disabled on RadioGroup.

Size

Dark theme

API Reference

RadioGroup

Radix RadioGroup root (a <div role="radiogroup">); supports all of its props. Adds:

PropTypeDefault
value
string
defaultValue
string
onValueChange
(value: string) => void
orientation
"vertical""horizontal"
"vertical"
disabled
boolean
false
name
string
required
boolean
false

Radio

One option (Radix RadioGroup.Item, a <button role="radio">). Adds:

PropTypeDefault
value
string
label
ReactNode
size
"sm""md"
"md"
disabled
boolean
false
className
string

Accessibility

  • Tab enters the group on the selected radio (one Tab stop); Tab again leaves it.
  • ↑ / ↓ (vertical) or ← / → (horizontal) move to the next option and select it; disabled options are skipped. Space selects the focused option.
  • Name the group with aria-label or aria-labelledby (or a Field); each Radio is named by its label.
  • On touch screens each radio’s hit area is 24×24.
© 2026 Motion. Internal documentation.