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>

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 | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | react82.ReactPortal | Promise<string | number | bigint | boolean | react82.ReactPortal | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | null | undefined> The fallback content to render when the toggle is not pressed.

Root

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js110.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	—	solid_js110.Accessor<boolean> The pressed state of the toggle.

Context

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

Indicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js110.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 | solid_js110.JSX.ArrayElement | (string & {})

Root

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").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("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
fallback	—	Snippet<[]> | undefined The fallback content to render when the toggle is not pressed.