Checkbox
Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。
<Checkbox>デスティニーアイランド</Checkbox>
使い方
import { Checkbox, CheckboxGroup } from "@yamada-ui/react"
import { Checkbox, CheckboxGroup } from "@/components/ui"
import { Checkbox, CheckboxGroup } from "@workspaces/ui"
<Checkbox />
<CheckboxGroup.Root>
<CheckboxGroup.Item />
</CheckboxGroup.Root>
グループ化する
<CheckboxGroup.Root defaultValue={["sora", "riku"]}>
<CheckboxGroup.Item value="sora">ソラ</CheckboxGroup.Item>
<CheckboxGroup.Item value="riku">リク</CheckboxGroup.Item>
<CheckboxGroup.Item value="kairi">カイリ</CheckboxGroup.Item>
</CheckboxGroup.Root>
itemsを使う
const items = useMemo<CheckboxGroup.Item[]>(
() => [
{ label: "ソラ", value: "sora" },
{ label: "リク", value: "riku" },
{ label: "カイリ", value: "kairi" },
],
[],
)
return <CheckboxGroup.Root items={items} />
バリアントを変更する
const items = useMemo<CheckboxGroup.Item[]>(
() => [
{ label: "Checked", value: "1" },
{ label: "No checked", value: "2" },
],
[],
)
return (
<VStack>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<CheckboxGroup.Root
key={variant}
variant={variant}
defaultValue={["1"]}
items={items}
/>
)}
</For>
</VStack>
)
サイズを変更する
const items = useMemo<CheckboxGroup.Item[]>(
() => [
{ label: "Checked", value: "1" },
{ label: "No checked", value: "2" },
],
[],
)
return (
<VStack>
<For each={["sm", "md", "lg"]}>
{(size) => (
<CheckboxGroup.Root
key={size}
size={size}
defaultValue={["1"]}
items={items}
/>
)}
</For>
</VStack>
)
デフォルト値を設定する
デフォルト値を設定する場合は、defaultValueに値を設定します。
const items = useMemo<CheckboxGroup.Item[]>(
() => [
{ label: "ソラ", value: "sora" },
{ label: "リク", value: "riku" },
{ label: "カイリ", value: "kairi" },
],
[],
)
return <CheckboxGroup.Root defaultValue={["sora"]} items={items} />
デフォルトで選択済みにする
デフォルトで選択済みにする場合は、defaultCheckedをtrueに設定します。
<Checkbox defaultChecked>デスティニーアイランド</Checkbox>
中間状態にする
中間状態にする場合は、indeterminateをtrueに設定します。
const [id0, id1, id2] = useIds()
const [values, setValues] = useState([true, false, false])
const allChecked = values.every(Boolean)
const indeterminate = values.some(Boolean) && !allChecked
return (
<VStack gap="sm">
<Checkbox
checked={allChecked}
indeterminate={indeterminate}
inputProps={{ "aria-controls": `${id0} ${id1} ${id2}` }}
onChange={(ev) =>
setValues([ev.target.checked, ev.target.checked, ev.target.checked])
}
>
デスティニーアイランド
</Checkbox>
<VStack gap="sm" ms="md">
<Checkbox
id={id0}
checked={values[0]}
onChange={(ev) =>
setValues([ev.target.checked, values[1]!, values[2]!])
}
>
ソラ
</Checkbox>
<Checkbox
id={id1}
checked={values[1]}
onChange={(ev) =>
setValues([values[0]!, ev.target.checked, values[2]!])
}
>
リク
</Checkbox>
<Checkbox
id={id2}
checked={values[2]}
onChange={(ev) =>
setValues([values[0]!, values[1]!, ev.target.checked])
}
>
カイリ
</Checkbox>
</VStack>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。選択数を制限する
選択数を制限する場合は、maxに数値を設定します。
const items = useMemo<CheckboxGroup.Item[]>(
() => [
{ label: "ソラ", value: "sora" },
{ label: "リク", value: "riku" },
{ label: "カイリ", value: "kairi" },
],
[],
)
return <CheckboxGroup.Root items={items} max={2} />
方向を変更する
方向を変更する場合は、orientationに"horizontal"または"vertical"を設定します。デフォルトは"vertical"です。
const items = useMemo<CheckboxGroup.Item[]>(
() => [
{ label: "ソラ", value: "sora" },
{ label: "リク", value: "riku" },
{ label: "カイリ", value: "kairi" },
],
[],
)
return (
<VStack>
<For each={["horizontal", "vertical"]}>
{(orientation) => (
<CheckboxGroup.Root
key={orientation}
orientation={orientation}
items={items}
/>
)}
</For>
</VStack>
)
形を変更する
形を変更する場合は、shapeに"rounded"または"square"を設定します。デフォルトは"rounded"です。
<CheckboxGroup.Root>
<For each={["rounded", "square"]}>
{(shape) => (
<CheckboxGroup.Item key={shape} shape={shape} defaultChecked>
{toTitleCase(shape)}
</CheckboxGroup.Item>
)}
</For>
</CheckboxGroup.Root>
無効にする
無効にする場合は、disabledをtrueに設定します。
<CheckboxGroup.Root>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<CheckboxGroup.Item key={variant} variant={variant} disabled>
{toTitleCase(variant)}
</CheckboxGroup.Item>
)}
</For>
</CheckboxGroup.Root>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<CheckboxGroup.Root>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<CheckboxGroup.Item
key={variant}
variant={variant}
readOnly
defaultChecked
>
{toTitleCase(variant)}
</CheckboxGroup.Item>
)}
</For>
</CheckboxGroup.Root>
無効な入力にする
無効な入力にする場合は、invalidをtrueに設定します。
<CheckboxGroup.Root>
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant) => (
<CheckboxGroup.Item key={variant} variant={variant} invalid>
{toTitleCase(variant)}
</CheckboxGroup.Item>
)}
</For>
</CheckboxGroup.Root>
ボーダーの色を変更する
ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。
<CheckboxGroup.Root>
<CheckboxGroup.Item value="default">Default Border Color</CheckboxGroup.Item>
<CheckboxGroup.Item focusBorderColor="green.500" value="custom">
Custom Border Color
</CheckboxGroup.Item>
<CheckboxGroup.Item errorBorderColor="orange.500" invalid value="error">
Custom Error Border Color
</CheckboxGroup.Item>
</CheckboxGroup.Root>
アイコンをカスタマイズする
アイコンをカスタマイズする場合は、checkedIconにReactNodeを設定します。
const items = useMemo<CheckboxGroup.Item[]>(
() => [
{ label: "ソラ", value: "sora" },
{ label: "リク", value: "riku" },
{ label: "カイリ", value: "kairi", checkedIcon: <HeartIcon /> },
],
[],
)
return <CheckboxGroup.Root checkedIcon={<KeyIcon />} items={items} />
カスタムコンポーネントを使う
const { getInputProps, getLabelProps, getRootProps } = useCheckboxGroup({
defaultValue: ["sora"],
max: 2,
})
const CustomCheckbox = ({ children, ...rest }) => {
return (
<Box
as="label"
css={{
"&:has(input:checked)": {
bg: "colorScheme.solid",
borderColor: "colorScheme.solid",
color: "colorScheme.contrast",
},
"&:has(input:disabled)": {
layerStyle: "disabled",
},
alignItems: "center",
borderWidth: "1px",
display: "flex",
h: "10",
px: "3",
rounded: "l2",
}}
{...getLabelProps()}
>
<Box as="input" {...getInputProps(rest)} />
{children}
</Box>
)
}
return (
<HStack {...getRootProps()}>
<CustomCheckbox value="sora">ソラ</CustomCheckbox>
<CustomCheckbox value="riku">リク</CustomCheckbox>
<CustomCheckbox value="kairi">カイリ</CustomCheckbox>
</HStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。制御する
const [checked, { toggle }] = useBoolean(false)
return (
<Checkbox checked={checked} onChange={toggle}>
ソラ
</Checkbox>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。