Components
Toggle

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:

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

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

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

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