Toggle

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

Show Code

<script setup lang="ts">
import { Toggle } from '@destyler-ui/vue'
</script>

<template>
  <Toggle.Root>
    <Toggle.Indicator>
      ✓
    </Toggle.Indicator>
    Toggle
  </Toggle.Root>
</template>

import { Toggle } from '@destyler-ui/react'

export function Basic() {
  return (
    <Toggle.Root>
      <Toggle.Indicator>
        ✓
      </Toggle.Indicator>
      Toggle
    </Toggle.Root>
  )
}

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

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

<script lang="ts">
  import { Toggle } from '@destyler-ui/svelte'
</script>

<Toggle.Root>
  <Toggle.Indicator>✓</Toggle.Indicator>
  Toggle
</Toggle.Root>

Anatomy

<script setup lang="ts">
import { Toggle } from '@destyler-ui/vue'
</script>

<template>
  <Toggle.Root>
    <Toggle.Indicator />
  </Toggle.Root>
</template>

import { Toggle } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>
  )
}

import { Toggle } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Toggle.Root>
      <Toggle.Indicator />
    </Toggle.Root>
  )
}

<script lang="ts">
  import { Toggle } from '@destyler-ui/svelte'
</script>

<Toggle.Root>
  <Toggle.Indicator>✓</Toggle.Indicator>
  Toggle
</Toggle.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { Toggle } from '@destyler-ui/vue'
</script>

<template>
  <Toggle.Root>
    <Toggle.Indicator>
      ✓
    </Toggle.Indicator>
    Toggle
  </Toggle.Root>
</template>

import { Toggle } from '@destyler-ui/react'

export function Basic() {
  return (
    <Toggle.Root>
      <Toggle.Indicator>
        ✓
      </Toggle.Indicator>
      Toggle
    </Toggle.Root>
  )
}

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

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

<script lang="ts">
  import { Toggle } from '@destyler-ui/svelte'
</script>

<Toggle.Root>
  <Toggle.Indicator>✓</Toggle.Indicator>
  Toggle
</Toggle.Root>

Controlled

Control the pressed state of the toggle programmatically.

Show Code

<script setup lang="ts">
import { Toggle } from '@destyler-ui/vue'
import { ref } from 'vue'

const pressed = ref(false)
</script>

<template>
  <output>{{ pressed }}</output>
  <Toggle.Root v-model="pressed">
    <Toggle.Indicator>✓</Toggle.Indicator>
    Toggle
  </Toggle.Root>
</template>

import { useState } from 'react'
import { Toggle } from '@destyler-ui/react'

export function Controlled() {
  const [pressed, setPressed] = useState(false)

  return (
    <>
      <output>{String(pressed)}</output>
      <Toggle.Root pressed={pressed} onPressedChange={setPressed}>
        <Toggle.Indicator>✓</Toggle.Indicator>
        Toggle
      </Toggle.Root>
    </>
  )
}

import { Toggle } from '@destyler-ui/solid/toggle'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [pressed, setPressed] = createSignal(false)

  return (
    <>
      <output>{String(pressed())}</output>
      <Toggle.Root pressed={pressed} onPressedChange={setPressed}>
        <Toggle.Indicator>✓</Toggle.Indicator>
        Toggle
      </Toggle.Root>
    </>
  )
}

<script lang="ts">
  import { Toggle } from '@destyler-ui/svelte'

  let pressed = $state(false)
</script>

<output>{String(pressed)}</output>
<Toggle.Root bind:pressed>
  <Toggle.Indicator>✓</Toggle.Indicator>
  Toggle
</Toggle.Root>

Initial Value

Seed the initial pressed state with defaultPressed.

Show Code

<script setup lang="ts">
import { Toggle } from '@destyler-ui/vue'
</script>

<template>
 <Toggle.Root :default-pressed="true">
    <Toggle.Indicator>
      ✓
    </Toggle.Indicator>
    Toggle
  </Toggle.Root>
</template>

import { Toggle } from '@destyler-ui/react'

export function InitialValue() {
  return (
    <Toggle.Root defaultPressed>
      <Toggle.Indicator>
        ✓
      </Toggle.Indicator>
      Toggle
    </Toggle.Root>
  )
}

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

export function InitialValue() {
  return (
    <Toggle.Root defaultPressed>
      <BoldIcon />
    </Toggle.Root>
  )
}

<script lang="ts">
  import { Toggle } from '@destyler-ui/svelte'
</script>

<Toggle.Root defaultPressed>
  <Toggle.Indicator>✓</Toggle.Indicator>
  Toggle
</Toggle.Root>

API Reference

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultPressed	—	false | true The default pressed state of the toggle.
disabled	—	false | true Whether the toggle is disabled.
modelValue	—	false | true The pressed state of the toggle.
onUpdate:modelValue	—	(pressed: boolean) => void Event handler called when the pressed state of the toggle changes.

Emit	Event
pressedChange	[value: boolean]
update:modelValue	[value: boolean]

Context

No serializable props or emits are declared for this part.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultPressed	—	false | true The default pressed state of the toggle.
onPressedChange	—	(pressed: boolean) => void Event handler called when the pressed state of the toggle changes.
pressed	—	false | true The pressed state of the toggle.

Context

Prop	Default	Type
children*	—	(context: UseToggleContext) => ReactNode

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
fallback	—	null | string | number | bigint | false | true | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> The fallback content to render when the toggle is not pressed.

Root

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
defaultPressed	—	false | true The default pressed state of the toggle.
onPressedChange	—	(pressed: boolean) => void Event handler called when the pressed state of the toggle changes.
pressed	—	Accessor<boolean> The pressed state of the toggle.

Context

Prop	Default	Type
children*	—	(context: UseToggleContext) => Element

Indicator

Prop	Default	Type
asChild	—	(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
fallback	—	null | number | false | true | Node | JSX.ArrayElement | (string & {})

Root

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children	—	Snippet<[]> | undefined
defaultPressed	—	false | true
disabled	—	false | true
onPressedChange	—	(pressed: boolean) => void
pressed	—	false | true

Context

Prop	Default	Type
render*	—	Snippet<[UseToggleContext]>

Indicator

Prop	Default	Type
asChild	—	Snippet<[import("../../../types.js").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
fallback	—	Snippet<[]> | undefined The fallback content to render when the toggle is not pressed.