チェックボックス
チェックボックスは、複数の項目の中から複数の選択肢を選ぶことを可能にします。
import { Checkbox } from "@/components/ui/checkbox";使用例
import { Checkbox } from "@/components/ui/checkbox";
export default function App() {
return (
<Checkbox.Root size="sm">
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.HiddenInput />
<Checkbox.Label>ラベル</Checkbox.Label>
</Checkbox.Root>
);
}
グループ
import { Checkbox } from "@/components/ui/checkbox";
export default function App() {
return (
<Checkbox.Group defaultValue={["選択肢2"]}>
{["選択肢1", "選択肢2", "選択肢3"].map((value) => (
<Checkbox.Root value={value} key={value}>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.HiddenInput />
<Checkbox.Label>{value}</Checkbox.Label>
</Checkbox.Root>
))}
</Checkbox.Group>
);
}
Indeterminate
import { useState } from "react";
import { Checkbox } from "@/components/ui/checkbox";
export default function App() {
const options = [
"サッカー",
"バスケットボール",
"テニス",
"スイミング",
"ヨガ",
];
const [selected, setSelected] = useState(["サッカー"]);
const onCheckedChange = () => {
if (selected.length === options.length) {
setSelected([]);
} else {
setSelected(options);
}
};
const onValueChange = (values: string[]) => {
setSelected(values);
};
return (
<>
<Checkbox.Root
mb={2}
onCheckedChange={onCheckedChange}
checked={
selected.length === options.length
? true
: selected.length === 0
? false
: "indeterminate"
}
>
<Checkbox.Control>
<Checkbox.Indicator />
<Checkbox.Indicator indeterminate />
</Checkbox.Control>
<Checkbox.HiddenInput />
<Checkbox.Label>すべてのスポーツ</Checkbox.Label>
</Checkbox.Root>
<Checkbox.Group value={selected} onValueChange={onValueChange}>
{options.map((value) => (
<Checkbox.Root value={value} key={value}>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.HiddenInput />
<Checkbox.Label>{value}</Checkbox.Label>
</Checkbox.Root>
))}
</Checkbox.Group>
</>
);
}
<Fieldset>でラベルとサポートテキストを表示
import { css } from "styled-system/css";
import { Checkbox } from "@/components/ui/checkbox";
import { Fieldset } from "@/components/ui/fieldset";
export default function App() {
return (
<Fieldset.Root>
<Fieldset.Legend>ラベル</Fieldset.Legend>
<Fieldset.SupportText id="stacked-support-text">
サポートテキスト
</Fieldset.SupportText>
<Checkbox.Group defaultValue={["選択肢2"]}>
<div
className={css({
mt: 2,
display: "flex",
flexDirection: "column",
gap: 2,
})}
>
{["選択肢1", "選択肢2", "選択肢3"].map((value) => (
<Checkbox.Root value={value} key={value}>
<Checkbox.Control>
<Checkbox.Indicator />
</Checkbox.Control>
<Checkbox.HiddenInput />
<Checkbox.Label>{value}</Checkbox.Label>
</Checkbox.Root>
))}
</div>
<Fieldset.ErrorText>エラーテキスト</Fieldset.ErrorText>
</Checkbox.Group>
</Fieldset.Root>
);
}