Toggle

A two-state button that can be toggled on or off.

Examples

Here's a basic example of how to use the Toggle component:

import { Toggle } from '@ark-ui/react/toggle' import { BoldIcon } from 'lucide-react'  export const Basic = () => {  return (  <Toggle.Root>  <BoldIcon />  </Toggle.Root>  ) }

import { Toggle } from '@ark-ui/solid/toggle' import { BoldIcon } from 'lucide-solid'  export const Basic = () => {  return (  <Toggle.Root>  <BoldIcon />  </Toggle.Root>  ) }

<script setup lang="ts"> import { Toggle } from '@ark-ui/vue/toggle' import { BoldIcon } from 'lucide-vue-next' </script>  <template>  <Toggle.Root>  <BoldIcon />  </Toggle.Root> </template>

<script>  import { Toggle } from '@ark-ui/svelte/toggle'  import { Bold } from 'lucide-svelte' </script>  <Toggle.Root>  <Bold /> </Toggle.Root>

Controlled

Use the pressed and onPressedChange props to control the toggle's state.

import { Toggle } from '@ark-ui/react/toggle' import { Volume, VolumeOff } from 'lucide-react' import { useState } from 'react'  export const Controlled = () => {  const [pressed, setPressed] = useState(false)  return (  <div>  <Toggle.Root pressed={pressed} onPressedChange={setPressed}>  {pressed ? <Volume /> : <VolumeOff />}  </Toggle.Root>  <p>Volume is {pressed ? 'unmuted' : 'muted'}</p>  </div>  ) }

import { Toggle } from '@ark-ui/solid/toggle' import { Volume, VolumeOff } from 'lucide-solid' import { Show, createSignal } from 'solid-js'  export const Controlled = () => {  const [pressed, setPressed] = createSignal(false)  return (  <div>  <Toggle.Root pressed={pressed()} onPressedChange={setPressed}>  <Show when={pressed()} fallback={<VolumeOff />}>  <Volume />  </Show>  </Toggle.Root>  <p>Volume is {pressed() ? 'unmuted' : 'muted'}</p>  </div>  ) }

<script setup lang="ts"> import { Toggle } from '@ark-ui/vue/toggle' import { Volume, VolumeOff } from 'lucide-vue-next' import { ref } from 'vue'  const pressed = ref(false) </script>  <template>  <div>  <Toggle.Root v-model:pressed="pressed">  <component :is="pressed ? Volume : VolumeOff" />  </Toggle.Root>  <p>Volume is {{ pressed ? 'unmuted' : 'muted' }}</p>  </div> </template>

<script>  import { Toggle } from '@ark-ui/svelte/toggle'  import { Volume, VolumeOff } from 'lucide-svelte'   let pressed = $state(false) </script>  <div>  <Toggle.Root bind:pressed>  {#if pressed}  <Volume />  {:else}  <VolumeOff />  {/if}  </Toggle.Root>  <p>Volume is {pressed ? 'unmuted' : 'muted'}</p> </div>

Disabled

Use the disabled prop to disable the toggle.

import { Toggle } from '@ark-ui/react/toggle' import { BoldIcon } from 'lucide-react'  export const Disabled = () => {  return (  <Toggle.Root disabled>  <BoldIcon />  </Toggle.Root>  ) }

import { Toggle } from '@ark-ui/solid/toggle' import { BoldIcon } from 'lucide-solid'  export const Disabled = () => {  return (  <Toggle.Root disabled>  <BoldIcon />  </Toggle.Root>  ) }

<script setup lang="ts"> import { Toggle } from '@ark-ui/vue/toggle' import { BoldIcon } from 'lucide-vue-next' </script>  <template>  <Toggle.Root disabled>  <BoldIcon />  </Toggle.Root> </template>

<script lang="ts">  import { Toggle } from '@ark-ui/svelte/toggle'  import { BoldIcon } from 'lucide-svelte' </script>  <Toggle.Root disabled>  <BoldIcon /> </Toggle.Root>

Indicator

Use the Toggle.Indicator component to render different indicators based on the state of the toggle.

import { Toggle } from '@ark-ui/react/toggle' import { Volume, VolumeOff } from 'lucide-react'  export const Indicator = () => {  return (  <Toggle.Root>  <Toggle.Indicator fallback={<Volume />}>  <VolumeOff />  </Toggle.Indicator>  </Toggle.Root>  ) }

import { Toggle } from '@ark-ui/solid/toggle' import { Volume, VolumeOff } from 'lucide-solid'  export const Indicator = () => {  return (  <Toggle.Root>  <Toggle.Indicator fallback={<Volume />}>  <VolumeOff />  </Toggle.Indicator>  </Toggle.Root>  ) }

<script setup lang="ts"> import { Toggle } from '@ark-ui/vue/toggle' import { Volume, VolumeOff } from 'lucide-vue-next' </script>  <template>  <Toggle.Root>  <Toggle.Indicator>  <template #fallback>  <Volume />  </template>  <VolumeOff />  </Toggle.Indicator>  </Toggle.Root> </template>

<script>  import { Toggle } from '@ark-ui/svelte/toggle'  import { Volume, VolumeOff } from 'lucide-svelte' </script>  <Toggle.Root>  <Toggle.Indicator>  {#snippet fallback()}  <Volume />  {/snippet}  <VolumeOff />  </Toggle.Indicator> </Toggle.Root>

API Reference

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultPressed`		`boolean` The default pressed state of the toggle.
`onPressedChange`		`(pressed: boolean) => void` Event handler called when the pressed state of the toggle changes.
`pressed`		`boolean` The pressed state of the toggle.

Data Attribute	Value
`[data-scope]`	toggle
`[data-part]`	root
`[data-state]`	"on" \| "off"
`[data-pressed]`	Present when pressed
`[data-disabled]`	Present when disabled

Indicator

Prop	Default	Type
`asChild`		`boolean` Use 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.

Data Attribute	Value
`[data-scope]`	toggle
`[data-part]`	indicator
`[data-disabled]`	Present when disabled
`[data-pressed]`	Present when pressed
`[data-state]`	"on" \| "off"