Radio 單選框

在一組備選項中進行單選，支援單獨使用與 LhRadioGroup 組合使用。

基礎用法

組合單選

水墨丹青留白工筆（禁用）

已選：ink

import { useState } from 'react'
import { LhRadio, LhRadioGroup } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('ink')

  return (
    <LhRadioGroup value={value} onChange={(val) => setValue(val as string)}>
      <LhRadio value="ink">水墨</LhRadio>
      <LhRadio value="danqing">丹青</LhRadio>
      <LhRadio value="blank">留白</LhRadio>
    </LhRadioGroup>
  )
}

Radio Props

屬性	說明	型別	可選值	預設值
value	選項值（必填）	unknown	—	—
checked	受控選取態（單獨使用時）	boolean	—	—
defaultChecked	非受控預設選取	boolean	—	false
label	顯示文案	string	—	—
disabled	停用	boolean	—	false
size	尺寸	'large' | 'middle' | 'small'	—	跟隨 ConfigProvider
name	原生 name 屬性（Group 透傳）	string	—	—
sx	快速版面配置屬性	SxProps	—	—

Radio 事件

事件	說明	回呼簽名	Vue 對照
onChange	選取時觸發（雙參數）	(checked: boolean, event: ChangeEvent) => void	@change

RadioGroup Props

屬性	說明	型別	預設值
value	受控選取值	unknown	—
defaultValue	非受控預設值	unknown	—
disabled	停用全部子項	boolean	false
size	子項尺寸	'large' | 'middle' | 'small'	跟隨 ConfigProvider
name	透傳給子項的原生 name	string	—

RadioGroup 事件

事件	說明	回呼簽名	Vue 對照
onChange	選取變化，回呼參數是選項的 value	(value: unknown) => void	@change

onChange 參數差異

LhRadio 的 onChange 回呼是 (checked, event)；LhRadioGroup 的 onChange 回呼直接是選取項的 value——與 CheckboxGroup 一致。

樣式

import '@lh-ui/react/style/radio'