Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.4

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={<BoldIcon />} aria-label="Toggle bold" />

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

Change Variant

Editable example

<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!

Change Size

Editable example

<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!

Change Color Scheme

Editable example

<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!

Disable

To disable, set disabled to true.

Editable example

<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!

Make Read-Only

To make read-only, set readOnly to true.

Editable example

<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!

Control

Editable example

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

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

Grouping

To group toggles, use ToggleGroup. ToggleGroup allows you to set variant, size, colorScheme, disabled, readOnly 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={<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!

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={<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!

Edit this page on GitHub

PreviousSwitchNextSelect