RadioGroup

A set of checkable buttons—known as radio buttons—where no more than one can be checked at a time. Built on Radix UI for accessibility.

Installation
# Install @opencosmos/ui to use RadioGroup
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— When true, prevents interaction with all radio items
Usage
Import
import { RadioGroup } from '@opencosmos/ui';
Example
<RadioGroup>
  Content
</RadioGroup>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
disabledbooleanfalseWhen true, prevents interaction with all radio items

Accessibility

  • Built on Radix UI RadioGroup primitive
  • Keyboard navigation with arrow keys
  • Proper radio group semantics with ARIA roles
  • Screen reader accessible
  • Focus management within group

Code Examples

Basic Usage

Radio group with two options

import { RadioGroup, RadioGroupItem } from '@opencosmos/ui';

<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <label htmlFor="option-one">Option One</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <label htmlFor="option-two">Option Two</label>
  </div>
</RadioGroup>