Choice Boxチョイスボックス

CheckBoxとRadioButtonからラベルを除いたコンポーネントです。カードやリストと併用して使用できます。

更新 2025/5/23

バリエーション

2種類のバリエーションがあります。いずれもChoice Boxを単体で使用することは推奨されません。

Checkbox
Radio

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

export function TypeSample() {
  return (
    <Dl>
      <Dt>Checkbox</Dt>
      <Dd>
        <ChoiceBox type="checkbox" value="itemA" />
      </Dd>
      <Dt>Radio</Dt>
      <Dd>
        <RadioGroup>
          <ChoiceBox type="radio" value="itemA" />
        </RadioGroup>
      </Dd>
    </Dl>
  );
}

Indeterminate状態

CheckboxタイプのChoiceBoxでは、indeterminate状態（未確定状態）を指定することができます。indeterminateは、親チェックボックスが一部の子要素のみ選択されている場合など、部分的な選択状態を表現する際に使用できます。

import { ChoiceBox } from "@serendie/ui";

export function IndeterminateSample() {
  return <ChoiceBox type="checkbox" value="itemA" indeterminate={true} />;
}