Skip to main content
ninna-ui
On this page

RadioGroup

RadioGroup component for selecting a single option from a list with support for labels, descriptions, and multiple sizes.

import { RadioGroup } from "@ninna-ui/forms";

pnpm add @ninna-ui/forms@latest
Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the RadioGroup component in your application.

import { RadioGroup, RadioGroupItem } from "@ninna-ui/forms";


export default function Example() {
  return (
    <RadioGroup defaultValue="option1">
      <RadioGroupItem value="option1" label="Option 1" />
      <RadioGroupItem value="option2" label="Option 2" />
    </RadioGroup>
  );
}

Basic

Basic radio group with options.

Live preview

Variants

RadioGroup supports outline, soft, and solid variants.

Live preview
Outline (default)
Soft
Solid

Sizes

RadioGroup comes in 3 sizes: sm, md, and lg.

Live preview

Small

Medium

Large

Colors

RadioGroup supports multiple color themes.

Live preview

Horizontal

RadioGroup with horizontal orientation.

Live preview

RadioCard

Card-style radio buttons with icons and descriptions.

Live preview

React Hook Form

RadioGroup works with React Hook Form using the Controller pattern.

Live preview

API Reference

Complete list of props for RadioGroup and RadioCard components.

RadioGroup Props

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Size of the radio buttons
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''primary'Color theme of the radio buttons
variant'outline' | 'soft' | 'solid''outline'Visual variant of the radio buttons
valuestring—Controlled value
defaultValuestring—Default value for uncontrolled usage
onValueChange(value: string) => void—Callback when value changes
orientation'horizontal' | 'vertical''vertical'Layout orientation
gap'sm' | 'md' | 'lg''md'Gap between radio items
invalidbooleanfalseWhether the radio group is in an invalid state
disabledbooleanfalseWhether the radio group is disabled
requiredbooleanfalseWhether a selection is required
namestring—Name for form submission
loopboolean—Whether to loop keyboard navigation
aria-labelstring—Accessible label for the radio group
aria-labelledbystring—ID of the element that labels the radio group

RadioCard Props

PropTypeDefaultDescription
valuestring—Value of this radio card (required)
titleReactNode—Card title
descriptionReactNode—Card description text
iconReactNode—Icon to display in the card
disabledbooleanfalseWhether this card is disabled
aria-labelstring—Accessible label for the radio card
aria-describedbystring—ID of element that describes this radio card

Accessibility

  • Built on Radix UI RadioGroup for full WAI-ARIA compliance
  • Uses role="radiogroup" announced to screen readers
  • Supports aria-label and aria-labelledby for labeling
  • Keyboard navigation: Arrow keys to navigate, Space to select
  • Labels are properly associated with radio buttons
  • Proper focus states with visible outlines