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>