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	選択時に発火（2 引数）	`(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'

基本的な使い方​

Radio Props​

Radio イベント​

RadioGroup Props​

RadioGroup イベント​

スタイル​