Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.5

Toggle

Toggle is a component that has two states: on or off.

Source@yamada-ui/toggle

Import

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

Usage

Editable example

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

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

Change Variant

Editable example

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

Change Size

Editable example

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

Change Color Scheme

Editable example

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

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

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

Disable

To disable, set isDisabled to true.

Editable example

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

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

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

Control

Editable example

const [isSelected, setIsSelected] = useState<boolean>(false)

return (
  <Toggle
    icon={<Bold />}
    aria-label="Toggle bold"
    isSelected={isSelected}
    onChange={setIsSelected}
  />
)
Copied!

Grouping

To group toggles, use ToggleGroup. ToggleGroup allows you to set variant, size, colorScheme, isDisabled, isReadOnly for child elements (Toggle) in bulk.

Editable example

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

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

For multiple selections, set value or defaultValue to an array.

Editable example

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

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

Edit this page on GitHub

PreviousSwitchNextSelect