Radio Component

A radio group component built on top of Radix UI's Radio Group, providing a set of checkable buttons where only one can be checked at a time.

Follows WAI-ARIA patterns for accessibility
Keyboard navigation support
Customizable styles through className prop
Integrates seamlessly with form libraries

Installation

The Radio component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the radio group in your project.

React TSX
1import { RadioGroup, RadioGroupItem } from "@/components/modern-ui/radio"

React TSX
1<RadioGroup defaultValue="option-one">
2  <div className="flex items-center space-x-2">
3    <RadioGroupItem value="option-one" id="option-one" />
4    <label htmlFor="option-one">Option One</label>
5  </div>
6</RadioGroup>

Examples

Basic Radio Group

Default

Comfortable

Compact

Disabled Radio Group

Default (Disabled)

Comfortable (Disabled)

Compact (Disabled)

Form Integration

API Reference

RadioGroup

The root component that contains all radio items.

Prop	Type	Default	Description
`defaultValue`	`string`	-	The value of the radio item that should be checked by default
`value`	`string`	-	The controlled value of the radio item to check
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the radio items
`name`	`string`	-	The name of the group. Submitted with its owning form as part of a name/value pair
`required`	`boolean`	`false`	When `true`, indicates that the user must check a radio item before the owning form can be submitted
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	The orientation of the component
`dir`	`"ltr" \| "rtl"`	-	The reading direction of the radio group
`loop`	`boolean`	`true`	When `true`, keyboard navigation will loop from last item to first and vice versa
`className`	`string`	-	Additional CSS classes for styling

RadioGroupItem

An individual radio item.

Prop	Type	Default	Description
`value`	`string`	Required	The unique value of the radio item
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the radio item
`required`	`boolean`	`false`	When `true`, indicates that the user must check the radio item before the owning form can be submitted
`id`	`string`	-	The ID of the radio item. Should be used with a label
`className`	`string`	-	Additional CSS classes for styling

Accessibility

The RadioGroup component follows the WAI-ARIA design pattern for Radio Groups.

Keyboard Interactions

Key	Description
`Space`	When focus is on a radio item, selects it
`ArrowDown`	Moves focus to the next radio item in the group
`ArrowRight`	Moves focus to the next radio item in the group
`ArrowUp`	Moves focus to the previous radio item in the group
`ArrowLeft`	Moves focus to the previous radio item in the group