Toggle
Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。
<Toggle icon={<BoldIcon />} aria-label="Toggle bold" />
使い方
import { Toggle, ToggleGroup } from "@yamada-ui/react"
import { Toggle, ToggleGroup } from "@/components/ui"
import { Toggle, ToggleGroup } from "@workspaces/ui"
<Toggle />
<ToggleGroup.Root>
<ToggleGroup.Item />
</ToggleGroup.Root>
テキストと組み合わせる
<Toggle px="4">
<ItalicIcon />
<Text as="span" fontSize="md">
Italic
</Text>
</Toggle>
バリアントを変更する
<Wrap gap="md">
<For each={["ghost", "subtle", "surface", "outline", "solid"]}>
{(variant) => (
<Toggle
key={variant}
icon={<BoldIcon />}
aria-label="Toggle bold"
variant={variant}
/>
)}
</For>
</Wrap>
サイズを変更する
<Wrap gap="md" alignItems="flex-start">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<Toggle
key={size}
icon={<BoldIcon />}
aria-label="Toggle bold"
size={size}
/>
)}
</For>
</Wrap>
カラースキームを変更する
<Wrap gap="md">
<For each={["success", "warning"]}>
{(colorScheme) => (
<Toggle
key={colorScheme}
colorScheme={colorScheme}
aria-label="Toggle bold"
icon={<BoldIcon />}
/>
)}
</For>
</Wrap>
丸くする
丸くする場合は、fullRoundedをtrueに設定します。
<Wrap gap="md">
<For each={["ghost", "subtle", "surface", "outline", "solid"]}>
{(variant) => (
<Toggle
key={variant}
icon={<BoldIcon />}
aria-label="Toggle bold"
variant={variant}
fullRounded
/>
)}
</For>
</Wrap>
無効にする
無効にする場合は、disabledをtrueにします。
<Wrap gap="md">
<For each={["ghost", "subtle", "surface", "outline", "solid"]}>
{(variant) => (
<Toggle
key={variant}
icon={<BoldIcon />}
aria-label="Toggle bold"
variant={variant}
disabled
/>
)}
</For>
</Wrap>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<Wrap gap="md">
<For each={["ghost", "subtle", "surface", "outline", "solid"]}>
{(variant) => (
<Toggle
key={variant}
icon={<BoldIcon />}
aria-label="Toggle bold"
variant={variant}
readOnly
/>
)}
</For>
</Wrap>
無効な状態にする
無効な状態にする場合は、invalidをtrueに設定します。
<Wrap gap="md">
<For each={["ghost", "subtle", "surface", "outline", "solid"]}>
{(variant) => (
<Toggle
key={variant}
icon={<BoldIcon />}
aria-label="Toggle bold"
variant={variant}
invalid
/>
)}
</For>
</Wrap>
ボーダーの色を変更する
ボーダーの色を変更する場合は、errorBorderColorに値を設定します。
<Toggle
aria-label="Toggle bold"
errorBorderColor="orange.500"
icon={<BoldIcon />}
defaultChecked
invalid
/>
制御する
const [checked, setChecked] = useState<boolean>(false)
return (
<Toggle
icon={<BoldIcon />}
aria-label="Toggle bold"
checked={checked}
onChange={setChecked}
/>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。グループ化する
<ToggleGroup.Root>
<ToggleGroup.Item value="bold" icon={<BoldIcon />} aria-label="Toggle bold" />
<ToggleGroup.Item
value="italic"
icon={<ItalicIcon />}
aria-label="Toggle italic"
/>
<ToggleGroup.Item
value="underline"
icon={<UnderlineIcon />}
aria-label="Toggle underline"
/>
</ToggleGroup.Root>
複数選択の場合は、valueまたはdefaultValueを配列にします。
const [value, setValue] = useState<string[]>([])
return (
<ToggleGroup.Root value={value} onChange={setValue}>
<ToggleGroup.Item
value="bold"
icon={<BoldIcon />}
aria-label="Toggle bold"
/>
<ToggleGroup.Item
value="italic"
icon={<ItalicIcon />}
aria-label="Toggle italic"
/>
<ToggleGroup.Item
value="underline"
icon={<UnderlineIcon />}
aria-label="Toggle underline"
/>
</ToggleGroup.Root>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。