Radio 单选框

从一组中选择一个选项的单选按钮。

导入

import { Radio } from 'asterui'

示例

基础用法

使用 Radio.Group 管理单选选择。

</>

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

水平布局

水平排列的单选按钮。

</>

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

不同尺寸

各种尺寸的单选按钮。

</>

Extra SmallSmallMediumLargeExtra Large

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

颜色

彩色单选按钮变体。

</>

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 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

在表单中

带有验证的表单中的单选组。

</>

Choose a plan

Basic

$10/month

Pro

$20/month

Enterprise

Contact us

 

Continue

Form Submitted

Form data:

null

Cancel

Close modal

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

属性	描述	类型	默认值
children	Radio 组件	React.ReactNode	-
value	当前选中的值(受控)	string | number	-
defaultValue	默认选中的值(非受控)	string | number	-
onChange	选择更改时的回调	(e: { target: { value: string | number, name?: string } }) => void	-
name	组中所有单选输入的名称	string	-
className	额外的 CSS 类	string	-

Radio

属性	描述	类型	默认值
value	单选值(在 Radio.Group 中时必需)	string | number	-
children	标签内容(包装在 label 元素中)	React.ReactNode	-
size	单选按钮尺寸	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	单选按钮颜色变体	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
disabled	禁用状态	boolean	false
className	额外的 CSS 类	string	-

可访问性

• 使用原生 <input type="radio"> 元素以获得完全的可访问性
• Radio.Group 使用 role="radiogroup" 以获得正确的语义
• 单选输入在组内共享 name 属性
• 标签正确连接以进行点击定位
• 使用箭头键在组内进行键盘导航
• 禁用状态正确传达给辅助技术