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} />;
}