Radio

Radio button for selecting one option from a group.

import { Radio } from 'ui-lab-components/radio';
 
export function Example() {
  return <Radio size="md" label="Option 1" />;
}

radio/01-radio-basic-radio

A simple radio button option with a label. Use this for single-choice selection in forms and settings.

Loading interactive preview
import { Radio } from 'ui-lab-components/radio';
 
export const metadata = {
  title: 'Basic Radio',
  description: 'A simple radio button option with a label. Use this for single-choice selection in forms and settings.'
};
 
export default function Example() {
  return (
    <Radio value="option1" label="Select this option" />
  );
}

radio/02-radio-radio-with-descriptions

Radio buttons with titles and descriptive text. Useful for plan selection, settings, or any choice that benefits from additional context.

Loading interactive preview
'use client';
 
import { Radio } from 'ui-lab-components/radio';
 
export const metadata = {
  title: 'Radio with Descriptions',
  description: 'Radio buttons with titles and descriptive text. Useful for plan selection, settings, or any choice that benefits from additional context.'
};
 
export default function Example() {
  return (
    <Radio.Group value="pro" className="w-full max-w-md">
      <Radio.Item
        value="starter"
        label="Starter Plan"
        description="Perfect for individuals and small projects. Includes 5GB storage and basic support."
      />
      <Radio.Item
        value="pro"
        label="Pro Plan"
        description="Ideal for growing teams. Includes 50GB storage, priority support, and advanced analytics."
      />
      <Radio.Item
        value="enterprise"
        label="Enterprise Plan"
        description="For large organizations. Unlimited storage, dedicated support, and custom integrations."
      />
    </Radio.Group>
  );
}
UI Lab