Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.4

Toggle

Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。

ソース@yamada-ui/toggle

インポート

import { Toggle, ToggleGroup } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<Wrap gap="md">
  <Toggle icon={<BoldIcon />} aria-label="Toggle bold" />

  <Toggle px="4">
    <ItalicIcon />
    Italic
  </Toggle>
</Wrap>
Copied!

バリアントを変更する

編集可能な例

<Wrap gap="md">
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="primary"
    variant="subtle"
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="secondary"
    variant="solid"
  />
  <Toggle icon={<BoldIcon />} aria-label="Toggle bold" variant="outline" />
  <Toggle icon={<BoldIcon />} aria-label="Toggle bold" variant="unstyled" />
</Wrap>
Copied!

サイズを変更する

編集可能な例

<Wrap gap="md" alignItems="flex-start">
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="primary"
    size="xs"
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="secondary"
    size="sm"
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="warning"
    size="md"
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="danger"
    size="lg"
  />
</Wrap>
Copied!

カラースキーマを変更する

編集可能な例

<VStack>
  <Wrap gap="md">
    <Toggle
      defaultSelected
      colorScheme="primary"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="secondary"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="success"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="warning"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="danger"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="link"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="gray"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="neutral"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="red"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="rose"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="pink"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="orange"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="amber"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="yellow"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="lime"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="green"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="emerald"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="teal"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="cyan"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="sky"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="blue"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="indigo"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="violet"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="purple"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      colorScheme="fuchsia"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
  </Wrap>

  <Wrap gap="md">
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="primary"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="secondary"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="success"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="warning"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="danger"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="link"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="gray"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="neutral"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="red"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="rose"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="pink"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="orange"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="amber"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="yellow"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="lime"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="green"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="emerald"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="teal"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="cyan"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="sky"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="blue"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="indigo"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="violet"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="purple"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="solid"
      colorScheme="fuchsia"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
  </Wrap>

  <Wrap gap="md">
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="primary"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="secondary"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="success"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="warning"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="danger"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="link"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="gray"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="neutral"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="red"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="rose"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="pink"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="orange"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="amber"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="yellow"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="lime"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="green"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="emerald"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="teal"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="cyan"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="sky"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="blue"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="indigo"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="violet"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="purple"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
    <Toggle
      defaultSelected
      variant="outline"
      colorScheme="fuchsia"
      aria-label="Toggle bold"
      icon={<BoldIcon />}
    />
  </Wrap>
</VStack>
Copied!

無効にする

無効にする場合は、disabledをtrueにします。

編集可能な例

<Wrap gap="md">
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="primary"
    variant="subtle"
    defaultSelected
    disabled
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="secondary"
    variant="solid"
    defaultSelected
    disabled
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    variant="outline"
    defaultSelected
    disabled
  />
</Wrap>
Copied!

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

編集可能な例

<Wrap gap="md">
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="primary"
    variant="subtle"
    defaultSelected
    readOnly
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    colorScheme="secondary"
    variant="solid"
    defaultSelected
    readOnly
  />
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    variant="outline"
    defaultSelected
    readOnly
  />
</Wrap>
Copied!

制御する

編集可能な例

const [selected, setSelected] = useState<boolean>(false)

return (
  <Toggle
    icon={<BoldIcon />}
    aria-label="Toggle bold"
    selected={selected}
    onChange={setSelected}
  />
)
Copied!

グループ化する

Toggleをグループ化する場合は、ToggleGroupを使用します。ToggleGroupは、子要素(Toggle)のvariant, size, colorScheme, disabled, readOnlyを一括で設定できます。

編集可能な例

const [value, setValue] = useState<string | undefined>(undefined)

return (
  <ToggleGroup value={value} onChange={setValue}>
    <Toggle value="bold" icon={<BoldIcon />} aria-label="Toggle bold" />
    <Toggle value="italic" icon={<ItalicIcon />} aria-label="Toggle italic" />
    <Toggle
      value="underline"
      icon={<UnderlineIcon />}
      aria-label="Toggle underline"
    />
  </ToggleGroup>
)
Copied!

複数選択の場合は、valueまたはdefaultValueを配列にします。

編集可能な例

const [value, setValue] = useState<string[]>([])

return (
  <ToggleGroup value={value} onChange={setValue}>
    <Toggle value="bold" icon={<BoldIcon />} aria-label="Toggle bold" />
    <Toggle value="italic" icon={<ItalicIcon />} aria-label="Toggle italic" />
    <Toggle
      value="underline"
      icon={<UnderlineIcon />}
      aria-label="Toggle underline"
    />
  </ToggleGroup>
)
Copied!

GitHubでこのページを編集する

前Switch次Select