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:

import { Toggle } from '@ark-ui/solid/toggle'
import { BoldIcon } from 'lucide-solid'

export const Basic = () => {
  return (
    <Toggle.Root>
      <BoldIcon />
    </Toggle.Root>
  )
}

Controlled

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

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

Disabled

Use the disabled prop to disable the toggle.

import { Toggle } from '@ark-ui/solid/toggle'
import { BoldIcon } from 'lucide-solid'

export const Disabled = () => {
  return (
    <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/solid/toggle'
import { Volume, VolumeOff } from 'lucide-solid'

export const Indicator = () => {
  return (
    <Toggle.Root>
      <Toggle.Indicator fallback={<Volume />}>
        <VolumeOff />
      </Toggle.Indicator>
    </Toggle.Root>
  )
}