Radio

'use client';

import { Radio } from '@/ui/forms/radios/Radio';
import { useState } from 'react';

export function RadioDemo() {
  const [selectedValue, setSelectedValue] = useState<string>('');

  return (
    <div className="flex flex-col gap-8">
      <Radio
        name="option"
        value="option1"
        checked={selectedValue === 'option1'}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        Option 1
      </Radio>
      <Radio
        name="option"
        value="option2"
        checked={selectedValue === 'option2'}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        Option 2
      </Radio>
      <Radio
        name="option"
        value="option3"
        checked={selectedValue === 'option3'}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        Option 3
      </Radio>
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/radio.json
Copy

Usage

Copyimport { Radio } from '@/docs/lib/ui/forms/radios/radio';
import { useState } from 'react';
 
export function Component() {
  const [selectedValue, setSelectedValue] = useState<string>('option1');
 
  return (
    <div className="flex flex-col gap-8">
      <Radio
        name="choice"
        value="option1"
        checked={selectedValue === 'option1'}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        Option 1
      </Radio>
      <Radio
        name="choice"
        value="option2"
        checked={selectedValue === 'option2'}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        Option 2
      </Radio>
      <Radio
        name="choice"
        value="option3"
        checked={selectedValue === 'option3'}
        onChange={(e) => setSelectedValue(e.target.value)}
      >
        Option 3
      </Radio>
    </div>
  );
}

API Reference

Radio

The Radio component also accepts all standard HTML input attributes via InputHTMLAttributes<HTMLInputElement>.

Notes

• Controlled Component: This is a fully controlled component. You must manage the checked state and onChange handler in the parent component.
• Native onChange: Uses standard HTML input onChange behavior. Access the value via event.target.value and checked state via event.target.checked.
• Single Choice Selection: Radio buttons are designed for selecting a single option from a group. Use the same name prop for all radios in the same group.
• Custom Size: The size prop controls the diameter of the radio button. The inner circle is automatically sized to 2/3 of the specified size.
• Disabled State: When disabled, the radio appears in a muted grey color and cannot be interacted with. The onChange callback is not triggered.
• Label Container: The entire component is wrapped in a label element, making the children clickable to toggle the radio.
• Keyboard Support: Supports standard keyboard navigation with customizable tab index.
• Data Attributes: Includes data-name="Radio" for easy targeting in tests and styling.
• Client Component: This component uses React hooks and must be used in a client component (requires "use client" directive in Next.js App Router).
• Saffron Color: The radio button indicator uses the saffron color from the design system (var(--color-saffron)).