Radio

A controlled radio group with accessible markup, custom visual styling, and support for hints and disabled states.

Installation

npx @obi/ui add radio

Preview

StarterUp to 5 users

ProUp to 50 users

EnterpriseUnlimited users

Usage

'use client';

import { useState } from 'react';
import { RadioGroup, RadioItem } from '@/src/components/Radio/Radio';

export default function Example() {
  const [plan, setPlan] = useState('pro');

  return (
    <RadioGroup name="plan" value={plan} onValueChange={setPlan}>
      <RadioItem value="free" label="Free" hint="Up to 3 projects" />
      <RadioItem value="pro" label="Pro" hint="Unlimited projects" />
      <RadioItem value="enterprise" label="Enterprise" hint="Custom limits" />
    </RadioGroup>
  );
}

Props

Name	Type	Default	Description
name	string	—	Shared name attribute applied to all radio inputs in the group.
value	string	—	Currently selected value (controlled).
onValueChange	(v: string) => void	—	Callback fired when the user selects a new option.
className	string	""	Additional classes on the group wrapper.