Radio 单选框

用于在一组互斥选项中选择一个。

基础用法

配合 RadioGroup 实现单选组合。

import { Radio, RadioGroup } from '@airo-ui/react'

function Demo() {
  return (
    <RadioGroup defaultValue="apple">
      <Radio value="apple" label="苹果" />
      <Radio value="banana" label="香蕉" />
      <Radio value="orange" label="橙子" />
    </RadioGroup>
  )
}

受控与非受控

import { useState } from 'react'
import { Radio, RadioGroup } from '@airo-ui/react'

function ControlledDemo() {
  const [value, setValue] = useState<string | number | boolean>('apple')

  return (
    <RadioGroup value={value} onChange={setValue}>
      <Radio value="apple" label="苹果" />
      <Radio value="banana" label="香蕉" />
      <Radio value="orange" label="橙子" />
    </RadioGroup>
  )
}

function UncontrolledDemo() {
  return (
    <RadioGroup defaultValue="banana" name="fruit">
      <Radio value="apple" label="苹果" />
      <Radio value="banana" label="香蕉" />
      <Radio value="orange" label="橙子" />
    </RadioGroup>
  )
}

禁用

import { Radio, RadioGroup } from '@airo-ui/react'

// 禁用整个组合
function GroupDisabled() {
  return (
    <RadioGroup defaultValue="apple" disabled>
      <Radio value="apple" label="苹果" />
      <Radio value="banana" label="香蕉" />
    </RadioGroup>
  )
}

// 禁用单个选项
function ItemDisabled() {
  return (
    <RadioGroup defaultValue="apple">
      <Radio value="apple" label="苹果" />
      <Radio value="banana" label="香蕉" disabled />
    </RadioGroup>
  )
}

API

Radio Props

名称	类型	默认值	说明
checked	boolean	—	受控模式选中状态
defaultChecked	boolean	false	非受控模式默认选中状态
value	string | number | boolean	—	选项值（必填）
disabled	boolean	false	是否禁用
label	string	—	标签文本
name	string	—	原生 name 属性
children	ReactNode	—	子内容
onChange	(value: RadioValue) => void	—	选中状态变化时触发

RadioGroup Props

名称	类型	默认值	说明
value	RadioValue	—	受控模式选中值
defaultValue	RadioValue	—	非受控模式默认选中值
name	string	—	原生 name 属性
disabled	boolean	false	是否禁用整个组合
children	ReactNode	—	子内容
onChange	(value: RadioValue) => void	—	选中值变化时触发