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