Radio / RadioGroup

Inputs

Stablev1.0.0

Accessible radio button components for single selection from a set of options. Built with Ariakit.

Installation

npx @component-labs/cli add radio

This will:
- Install required dependencies
- Copy the Radio component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Radio, RadioGroup } from "@component-labs/ui";

<RadioGroup label="Choose a size" defaultValue="medium">
  <Radio value="small" label="Small" />
  <Radio value="medium" label="Medium" />
  <Radio value="large" label="Large" />
</RadioGroup>

Props

Name	Type	Default	Description
`Radio.value*`	`string`	`-`	The value of this radio button
`Radio.label`	`ReactNode`	`-`	Label text for the radio button
`Radio.description`	`ReactNode`	`-`	Description text shown below the label
`Radio.error`	`boolean`	`-`	Whether this radio is in an error state
`Radio.disabled`	`boolean`	`-`	Whether the radio button is disabled
`RadioGroup.defaultValue`	`string`	`-`	Default selected value (uncontrolled)
`RadioGroup.value`	`string`	`-`	Controlled selected value
`RadioGroup.onChange`	`(value: string) => void`	`-`	Callback when selection changes
`RadioGroup.label`	`ReactNode`	`-`	Label for the radio group
`RadioGroup.error`	`string`	`-`	Error message to display
`RadioGroup.className`	`string`	`-`	Additional CSS classes

Examples

Basic

A simple radio group

<RadioGroup label="Choose a size" defaultValue="medium">
  <Radio value="small" label="Small" />
  <Radio value="medium" label="Medium" />
  <Radio value="large" label="Large" />
</RadioGroup>

With Descriptions

Radio buttons with helper text

<RadioGroup label="Select plan" defaultValue="pro">
  <Radio
    value="free"
    label="Free"
    description="Perfect for trying out"
  />
  <Radio
    value="pro"
    label="Pro"
    description="For professionals"
  />
  <Radio
    value="enterprise"
    label="Enterprise"
    description="For large teams"
  />
</RadioGroup>

With Error

Radio group with validation error

<RadioGroup
  label="Required selection"
  error="Please select an option"
>
  <Radio value="yes" label="Yes" error />
  <Radio value="no" label="No" error />
</RadioGroup>

Controlled

Controlled radio group

const [value, setValue] = useState("option1");

<RadioGroup
  label="Controlled"
  value={value}
  onChange={setValue}
>
  <Radio value="option1" label="Option 1" />
  <Radio value="option2" label="Option 2" />
</RadioGroup>

Disabled

Disabled radio options

<RadioGroup label="With disabled options" defaultValue="enabled">
  <Radio value="enabled" label="Enabled" />
  <Radio value="disabled" label="Disabled" disabled />
</RadioGroup>

Performance

Bundle Size

~3KB gzipped

Minified and gzipped

Dependencies

•@ariakit/react
•class-variance-authority
•clsx
•tailwind-merge
•lucide-react

Accessibility

•Full keyboard navigation support
•Proper ARIA attributes for radio groups
•Screen reader friendly error messages
•Focus management and visual indicators