Radio

Radio buttons for selecting one option from a set.

Import

import { Radio } from 'asterui'

Examples

Basic Usage

Use Radio.Group to manage radio selection.

Option 1Option 2Option 3

import { Radio, Space } from 'asterui'

function App() {
  return (
      <Radio.Group defaultValue="1">
        <Space size="sm">
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="1" />
            <span>Option 1</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="2" />
            <span>Option 2</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="3" />
            <span>Option 3</span>
          </label>
        </Space>
      </Radio.Group>
    )
}

export default App

Horizontal Layout

Radio buttons in a horizontal row.

AppleOrangeBanana

import { Radio } from 'asterui'

function App() {
  return (
      <Radio.Group defaultValue="apple">
        <div className="flex gap-4">
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="apple" />
            <span>Apple</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="orange" />
            <span>Orange</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="banana" />
            <span>Banana</span>
          </label>
        </div>
      </Radio.Group>
    )
}

export default App

Different Sizes

Radio buttons in various sizes.

import { Radio, Space } from 'asterui'

function App() {
  return (
      <Space size="sm">
        <label className="flex items-center gap-2">
          <Radio size="xs" defaultChecked />
          <span className="text-xs">Extra Small</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="sm" />
          <span className="text-sm">Small</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="md" />
          <span>Medium</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="lg" />
          <span className="text-lg">Large</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="xl" />
          <span className="text-xl">Extra Large</span>
        </label>
      </Space>
    )
}

export default App

Colors

Colored radio button variants.

import { Radio } from 'asterui'

function App() {
  return (
      <div className="flex flex-wrap gap-4">
        <Radio color="primary" defaultChecked />
        <Radio color="secondary" />
        <Radio color="accent" />
        <Radio color="info" />
        <Radio color="success" />
        <Radio color="warning" />
        <Radio color="error" />
      </div>
    )
}

export default App

Disabled State

Disabled radio buttons.

Disabled uncheckedDisabled checked

import { Radio, Space } from 'asterui'

function App() {
  return (
      <Space size="sm">
        <label className="flex items-center gap-2">
          <Radio disabled />
          <span className="opacity-50">Disabled unchecked</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio disabled defaultChecked />
          <span className="opacity-50">Disabled checked</span>
        </label>
      </Space>
    )
}

export default App

In Form

Radio group in a form with validation.

import { Radio, Space, Form, Modal } from 'asterui'
import { useState } from 'react'

function App() {
  const [submittedData, setSubmittedData] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  const handleSubmit = (values: { plan?: string }) => {
    setSubmittedData(values);
    setIsModalOpen(true);
  };
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ plan: 'basic' }}>
        <Form.Item name="plan" label="Choose a plan" rules={{ required: 'Please select a plan' }}>
          <Radio.Group>
            <Space size="sm">
              <label className="flex items-center gap-2 cursor-pointer">
                <Radio value="basic" />
                <div>
                  <div className="font-semibold">Basic</div>
                  <div className="text-sm opacity-70">$10/month</div>
                </div>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <Radio value="pro" />
                <div>
                  <div className="font-semibold">Pro</div>
                  <div className="text-sm opacity-70">$20/month</div>
                </div>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <Radio value="enterprise" />
                <div>
                  <div className="font-semibold">Enterprise</div>
                  <div className="text-sm opacity-70">Contact us</div>
                </div>
              </label>
            </Space>
          </Radio.Group>
        </Form.Item>
        <button type="submit" className="btn btn-primary">
          Continue
        </button>
      </Form>
  
      <Modal
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        title="Form Submitted"
        footer={null}
      >
        <div className="py-4">
          <p className="mb-4">Form data:</p>
          <pre className="bg-base-200 p-4 rounded-lg overflow-auto max-h-96">
            {JSON.stringify(submittedData, null, 2)}
          </pre>
        </div>
      </Modal>
    )
}

export default App

API

`Radio.Group`

Property	Description	Type	Default
`children`	Radio components	`React.ReactNode`	-
`value`	Current selected value (controlled)	`string \| number`	-
`defaultValue`	Default selected value (uncontrolled)	`string \| number`	-
`onChange`	Callback when selection changes	`(e: { target: { value: string \| number, name?: string } }) => void`	-
`name`	Name for all radio inputs in the group	`string`	-
`className`	Additional CSS classes	`string`	-

`Radio`

Property	Description	Type	Default
`value`	Radio value (required when in Radio.Group)	`string \| number`	-
`children`	Label content (wraps in label element)	`React.ReactNode`	-
`size`	Radio button size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`color`	Radio button color variant	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	-
`disabled`	Disabled state	`boolean`	`false`
`className`	Additional CSS classes	`string`	-

Accessibility

Uses native <input type="radio"> elements for full accessibility
Radio.Group uses role="radiogroup" for proper semantics
Radio inputs share name attribute within a group
Labels are properly connected for click targeting
Keyboard navigation with arrow keys within groups
Disabled state is properly communicated to assistive technologies