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>

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">
      <component :is="pressed ? Volume : VolumeOff" />
    </Toggle.Root>
    <p>Volume is {{ pressed ? 'unmuted' : 'muted' }}</p>
  </div>
</template>

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>

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>