Caroa UI

RadioGroup

ラジオボタングループコンポーネント。

インポート

import { RadioGroup, RadioGroupItem } from '@caroainc/ui-components/client'

基本的な使い方

Loading...
<RadioGroup defaultValue="option-1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-1" id="option-1" />
    <Label htmlFor="option-1">オプション1</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-2" id="option-2" />
    <Label htmlFor="option-2">オプション2</Label>
  </div>
</RadioGroup>

無効状態

Loading...
<RadioGroup disabled>
  ...
</RadioGroup>

Props

RadioGroup

PropTypeDefaultDescription
valuestring-選択値(制御コンポーネント)
defaultValuestring-初期選択値
onValueChange(value: string) => void-選択変更時のコールバック
disabledbooleanfalse全体を無効化

On this page