Radio Buttonラジオボタン

ChoiceBoxにラベルを付けたコンポーネントです。複数の選択肢から、一つを排他的に選択する際に使用します。

更新 2024/11/1

バリエーション

選択肢を表すクリック可能なラベルが必ず必要です。補足テキストも追加できます。

Single Line: タイトルタイトル
Multiple Line: タイトルタイトル補足テキスト補足テキスト補足テキスト

import { RadioButton, RadioGroup } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function TypeSample() {
  return (
    <RadioGroup>
      <Dl>
        <Dt>Single Line</Dt>
        <Dd>
          <RadioButton label={"タイトルタイトル"} value="1" />
        </Dd>

        <Dt>Multiple Line</Dt>
        <Dd>
          <RadioButton
            value="2"
            label={"タイトルタイトル"}
            helperText="補足テキスト補足テキスト補足テキスト"
          />
        </Dd>
      </Dl>
    </RadioGroup>
  );
}

状態

EnabledとSelectedを基本とし、Disabledにより変更不可とします。

Enabled: タイトルタイトル
Selected: タイトルタイトル
Disabled - Enabled: タイトルタイトル
Disabled - Selected: タイトルタイトル

import { RadioButton, RadioGroup } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <RadioGroup>
          <RadioButton label={"タイトルタイトル"} value="1" />
        </RadioGroup>
      </Dd>

      <Dt>Selected</Dt>
      <Dd>
        <RadioGroup defaultValue={"2"}>
          <RadioButton label={"タイトルタイトル"} value="2" />
        </RadioGroup>
      </Dd>

      <Dt>Disabled - Enabled</Dt>
      <Dd>
        <RadioGroup>
          <RadioButton label={"タイトルタイトル"} value="3" disabled />
        </RadioGroup>
      </Dd>

      <Dt>Disabled - Selected</Dt>
      <Dd>
        <RadioGroup defaultValue={"4"}>
          <RadioButton label={"タイトルタイトル"} value="4" disabled />
        </RadioGroup>
      </Dd>
    </Dl>
  );
}