Caroa UI

RadioGroup

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

インポート

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

個別サブパス（バンドルサイズを抑えたい場合）:

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

基本的な使い方

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>

バリアント

variant="primary" を指定すると選択時にブランドカラーで表示されます（RadioGroup に指定すると配下の全 RadioGroupItem に伝播し、個々の RadioGroupItem で上書きも可能）。

Loading...
<RadioGroup defaultValue="option-1" variant="primary">
  <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全体を無効化
variant'base' | 'primary''base'選択時の色。配下のRadioGroupItemへ伝播する（RadioGroupItem側で個別上書き可）

RadioGroupItem

PropTypeDefaultDescription
value*string-選択肢の値
variant'base' | 'primary'-選択時の色。未指定時はRadioGroupのvariantを継承する

Previous

Progress

Next

Resizable

On this page