Toggle
Used to create a button that can be toggled on and off.
import { Button, Toggle } from '@chakra-ui/react'
import { LuBold } from 'react-icons/lu'
export const ToggleBasic = () => {
return (
<Toggle.Root px="0" asChild>
<Button variant={{ base: 'subtle', _pressed: 'solid' }}>
<LuBold />
</Button>
</Toggle.Root>
)
}
Anatomy
import { Toggle } from '@chakra-ui/react'<Toggle.Root>
<Toggle.Indicator />
</Toggle.Root>The Toggle.Root renders a button element. Use the asChild prop to render
it as any other button component, like the Button component.
Examples
Basic
Use the _pressed condition to style the toggle when it is pressed. Since the
toggle renders a button, the asChild prop lets you reuse the Button
component and its variants.
import { Button, Toggle } from '@chakra-ui/react'
import { LuBold } from 'react-icons/lu'
export const ToggleBasic = () => {
return (
<Toggle.Root px="0" asChild>
<Button variant={{ base: 'subtle', _pressed: 'solid' }}>
<LuBold />
</Button>
</Toggle.Root>
)
}
Indicator
Use the Toggle.Indicator component to render different content based on the
pressed state. Pass the unpressed content to the fallback prop, and the
pressed content as children.
import { Button, Toggle } from '@chakra-ui/react'
import { LuVolume2, LuVolumeX } from 'react-icons/lu'
export const ToggleWithIndicator = () => {
return (
<Toggle.Root asChild>
<Button variant={{ base: 'outline', _pressed: 'solid' }}>
<Toggle.Indicator fallback={<LuVolume2 />}>
<LuVolumeX />
</Toggle.Indicator>
<Toggle.Indicator fallback="Mute">Unmute</Toggle.Indicator>
</Button>
</Toggle.Root>
)
}
Pressed Icon
Render a Toggle.Indicator without a fallback to only show an icon when the
toggle is pressed. The colorPalette prop also accepts the _pressed
condition.
import { Button, Toggle } from '@chakra-ui/react'
import { LuX } from 'react-icons/lu'
export const ToggleWithPressedIcon = () => {
return (
<Toggle.Root asChild defaultPressed>
<Button
variant={{ base: 'outline', _pressed: 'solid' }}
colorPalette={{ base: 'gray', _pressed: 'red' }}
>
<Toggle.Indicator>
<LuX />
</Toggle.Indicator>
Declined
</Button>
</Toggle.Root>
)
}
Controlled
Use the pressed and onPressedChange props to control the pressed state
programmatically.
Pressed: false'use client'
import { useState } from 'react'
import { Button, Code, Stack, Toggle } from '@chakra-ui/react'
export const ToggleControlled = () => {
const [pressed, setPressed] = useState(false)
return (
<Stack align="flex-start">
<Toggle.Root asChild pressed={pressed} onPressedChange={setPressed}>
<Button variant={{ base: 'subtle', _pressed: 'solid' }}>Pressed</Button>
</Toggle.Root>
<Code size="sm" fontWeight="medium">
Pressed: {pressed ? 'true' : 'false'}
</Code>
</Stack>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultPressed | booleanThe default pressed state of the toggle. | |
onPressedChange | (pressed: boolean) => voidEvent handler called when the pressed state of the toggle changes. | |
pressed | booleanThe pressed state of the toggle. |
Indicator
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
fallback | string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The fallback content to render when the toggle is not pressed. |