Radio

複数の選択肢から1つを選ぶラジオボタン。ラジオグループで使用。

インストール

import { Radio } from "@ginga-ui/core";

基本的な使い方

シンプルなラジオグループの使用例です。

export function BasicExample() {
  return (
    <RadioGroup>
      <Radio value="option1">オプション 1</Radio>
      <Radio value="option2">オプション 2</Radio>
      <Radio value="option3">オプション 3</Radio>
    </RadioGroup>
  );
}

デフォルト値

初期選択値を持つラジオグループです。

export function DefaultValueExample() {
  return (
    <RadioGroup defaultValue="option2">
      <Radio value="option1">オプション 1</Radio>
      <Radio value="option2">オプション 2(デフォルト選択)</Radio>
      <Radio value="option3">オプション 3</Radio>
    </RadioGroup>
  );
}

無効化

一部のオプションが無効化されたラジオグループです。

export function DisabledExample() {
  return (
    <RadioGroup>
      <Radio value="option1">オプション 1</Radio>
      <Radio value="option2" disabled>
        オプション 2(無効)
      </Radio>
      <Radio value="option3">オプション 3</Radio>
    </RadioGroup>
  );
}

制御されたラジオグループ

状態を外部から制御するラジオグループです。

export function ControlledExample() {
  return (
    <RadioGroup onChange={(value) => console.log("選択:", value)}>
      <Radio value="small">小</Radio>
      <Radio value="medium">中</Radio>
      <Radio value="large">大</Radio>
    </RadioGroup>
  );
}