Radio Group

A group of radio buttons where only one option can be selected at a time.

Usage

import { RadioGroup, Label } from "@rhinolabs/ui"

export default function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="option-one" id="option-one" />
        <Label htmlFor="option-one">Option One</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroup.Item value="option-two" id="option-two" />
        <Label htmlFor="option-two">Option Two</Label>
      </div>
    </RadioGroup>
  )
}

Examples

Basic Radio Group

A simple group of radio buttons.

<RadioGroup defaultValue="comfortable">
  <div className="flex flex-col space-y-2">
    <div className="flex items-center space-x-2">
      <RadioGroup.Item value="default" id="default" />
      <Label htmlFor="default">Default</Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroup.Item value="comfortable" id="comfortable" />
      <Label htmlFor="comfortable">Comfortable</Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroup.Item value="compact" id="compact" />
      <Label htmlFor="compact">Compact</Label>
    </div>
  </div>
</RadioGroup>

With Descriptions

Radio buttons with additional description text.

<RadioGroup defaultValue="card">
  <div className="flex flex-col space-y-4">
    <div className="flex items-start space-x-3">
      <RadioGroup.Item value="card" id="card" />
      <div>
        <Label htmlFor="card">Card Payment</Label>
        <p className="text-sm text-muted-foreground">
          Pay with your credit or debit card.
        </p>
      </div>
    </div>
    <div className="flex items-start space-x-3">
      <RadioGroup.Item value="paypal" id="paypal" />
      <div>
        <Label htmlFor="paypal">PayPal</Label>
        <p className="text-sm text-muted-foreground">
          Pay with your PayPal account.
        </p>
      </div>
    </div>
  </div>
</RadioGroup>

Props

RadioGroup

Prop	Type	Description
value	string	The controlled value
defaultValue	string	The default value
onValueChange	(value: string) => void	Value change callback
disabled	boolean	Whether the group is disabled

RadioGroupItem

Prop	Type	Description
value	string	The value of the radio item
disabled	boolean	Whether the item is disabled

Design Considerations

• Group related options logically
• Provide clear labels
• Use consistent spacing
• Consider mobile touch targets
• Include descriptive text when needed

Accessibility

• Supports keyboard navigation
• Maintains focus states
• Uses semantic markup
• Provides ARIA labels
• Handles disabled states