Check Box
A labeled ChoiceBox for selecting one or more options from a list.
Last updated 11/1/2024
Variants
Clickable labels for options are required and can include supporting text.
- 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>
);
}States
Enabled and Selected are basic; Disabled makes it non-interactive.
- 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>
);
}