Radio

Radio button for selecting one option from a group.

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

Basic Radio

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

import React from 'react';
import { Radio } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Radio value="option1" label="Select this option" />
  );
}

Radio with Descriptions

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

Perfect for individuals and small projects. Includes 5GB storage and basic support.

Ideal for growing teams. Includes 50GB storage, priority support, and advanced analytics.

For large organizations. Unlimited storage, dedicated support, and custom integrations.

'use client';
 
import React from 'react';
import { Radio } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Radio.Group defaultValue="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