Check Boxチェックボックス

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

更新 2024/11/1

バリエーション

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

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

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

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

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

状態

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

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

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

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

      <Dt>Selected</Dt>
      <Dd>
        <Checkbox label={"タイトルタイトル"} checked />
      </Dd>

      <Dt>Disabled - Enabled</Dt>
      <Dd>
        <Checkbox label={"タイトルタイトル"} disabled />
      </Dd>

      <Dt>Disabled - Selected</Dt>
      <Dd>
        <Checkbox label={"タイトルタイトル"} disabled checked />
      </Dd>
    </Dl>
  );
}