Krawma Design System

Radio Group

uistable

Radio Group — extracted 1:1 from WEM-App.

npx shadcn add @krawma/radio-group

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States
checkeddisabledfocus-visible
Keyboard
ArrowUpArrowDownArrowLeftArrowRight
Depends on
utils

Purpose

A single-choice control for a small, mutually-exclusive set of options that are all visible at once. For many options or a searchable list, use select or combobox; for a binary choice, use switch/checkbox.

Anatomy

RadioGroup (role="radiogroup") › one RadioGroupItem per option, each paired with a Label.

Style

No variants — token-backed radios. Selected uses --primary.

Behavior & functionality

Controlled (value + onValueChange) or uncontrolled (defaultValue). Exactly one item is selected at a time.

Accessibility

  • Roving focus: arrow keys move between and select items; the group is a single tab stop.
  • Each item needs a Label; the group should have an accessible name (a heading or aria-label).
  • Honor disabled (per-item or whole group) and visible focus-visible.

Do / Don't

  • ✅ Use for 2–5 always-visible, mutually-exclusive options.
  • ❌ Don't use for many options — reach for select/combobox.