Switch

A control that allows toggling between two states, on and off.

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

<template>
  <Switch.Root>
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

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

export function Basic(props: Switch.RootProps) {
  return (
    <Switch.Root {...props}>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

import { Switch } from '@destyler-ui/solid/switch'

export function Basic() {
  return (
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

  export interface BasicProps extends SwitchRootProps {}
</script>

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

  const props: BasicProps = $props()
</script>

<Switch.Root {...props}>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

Anatomy

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

<template>
  <Switch.Root>
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label />
    <Switch.HiddenInput />
  </Switch.Root>
</template>

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

export default function Basic() {
  return (
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label />
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

export default function Basic() {
  return (
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label />
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

<Switch.Root>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Notifications</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

Examples

Basic

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

<template>
  <Switch.Root>
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

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

export function Basic(props: Switch.RootProps) {
  return (
    <Switch.Root {...props}>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

import { Switch } from '@destyler-ui/solid/switch'

export function Basic() {
  return (
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

  export interface BasicProps extends SwitchRootProps {}
</script>

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

  const props: BasicProps = $props()
</script>

<Switch.Root {...props}>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

Controlled

Control the switch state programmatically.

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

const checked = ref(true)
</script>

<template>
  <Switch.Root v-model:checked="checked">
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

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

export function Controlled() {
  const [checked, setChecked] = useState(true)

  return (
    <Switch.Root checked={checked} onCheckedChange={e => setChecked(e.checked)}>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

import { Switch } from '@destyler-ui/solid/switch'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [checked, setChecked] = createSignal(false)

  return (
    <Switch.Root checked={checked()} onCheckedChange={e => setChecked(e.checked)}>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

  let checked = $state(true)
</script>

<Switch.Root bind:checked>
  <Switch.Control><Switch.Thumb /></Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

Initial Value

Set the initial checked state.

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

<template>
  <Switch.Root :defaultChecked="true">
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

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

export function InitialValue() {
  return (
    <Switch.Root defaultChecked>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

import { Switch } from '@destyler-ui/solid/switch'

export function InitialValue() {
  return (
    <Switch.Root checked>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

<Switch.Root defaultChecked>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

Disabled

Display a disabled switch.

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

<template>
  <Switch.Root disabled>
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

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

export function Disabled() {
  return (
    <Switch.Root disabled>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

import { Switch } from '@destyler-ui/solid/switch'

export function Disabled() {
  return (
    <Switch.Root disabled>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

<Switch.Root disabled>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

Render Prop

Use render prop for custom switch rendering.

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

<template>
  <Switch.Root>
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Context v-slot="api">
      <Switch.Label>Feature is {{ api.checked ? 'enabled' : 'disabled' }}</Switch.Label>
    </Switch.Context>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

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

export function RenderProp() {
  return (
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Context>
        {api => (
          <Switch.Label>Feature is {api.checked ? 'enabled' : 'disabled'}</Switch.Label>
        )}
      </Switch.Context>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

import { Switch } from '@destyler-ui/solid/switch'

export function RenderProp() {
  return (
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Context>
        {context => (
          <Switch.Label>Feature is {context().checked ? 'enabled' : 'disabled'}</Switch.Label>
        )}
      </Switch.Context>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

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

<Switch.Root>
  <Switch.Control><Switch.Thumb /></Switch.Control>
  <Switch.Context>
    {#snippet render(api)}
      <Switch.Label>Feature is {api().checked ? 'enabled' : 'disabled'}</Switch.Label>
    {/snippet}
  </Switch.Context>
  <Switch.HiddenInput />
</Switch.Root>

With Field

Combine with a form field for validation and labeling.

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

<template>
  <Field.Root>
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { Switch } from '@destyler-ui/react'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <Switch.Root>
        <Switch.Control>
          <Switch.Thumb />
        </Switch.Control>
        <Switch.Label>Label</Switch.Label>
        <Switch.HiddenInput />
      </Switch.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { Switch } from '@destyler-ui/solid/switch'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <Switch.Root>
        <Switch.Control>
          <Switch.Thumb />
        </Switch.Control>
        <Switch.Label>Label</Switch.Label>
        <Switch.HiddenInput />
      </Switch.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

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

  export interface WithFieldProps extends FieldRootProps {}
</script>

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

  const props: WithFieldProps = $props()
</script>

<Field.Root {...props}>
  <Switch.Root>
    <Switch.Control><Switch.Thumb /></Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

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

const switchApi = useSwitch()
</script>

<template>
  <button @click="switchApi.toggleChecked()">Toggle</button>

  <Switch.RootProvider :value="switchApi">
    <Switch.Control>
      <Switch.Thumb />
    </Switch.Control>
    <Switch.Label>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.RootProvider>
</template>

import { Switch, useSwitch } from '@destyler-ui/react'

export function RootProvider() {
  const switchApi = useSwitch()

  return (
    <>
      <button onClick={() => switchApi.toggleChecked()}>Toggle</button>

      <Switch.RootProvider value={switchApi}>
        <Switch.Control>
          <Switch.Thumb />
        </Switch.Control>
        <Switch.Label>Label</Switch.Label>
        <Switch.HiddenInput />
      </Switch.RootProvider>
    </>
  )
}

import { Switch, useSwitch } from '@destyler-ui/solid/switch'

export function RootProvider() {
  const switchApi = useSwitch()

  return (
    <>
      <button onClick={() => switchApi().toggleChecked()}>Toggle</button>

      <Switch.RootProvider value={switchApi}>
        <Switch.Control>
          <Switch.Thumb />
        </Switch.Control>
        <Switch.Label>Label</Switch.Label>
        <Switch.HiddenInput />
      </Switch.RootProvider>
    </>
  )
}

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

  const id = $props.id()
  const switchApi = useSwitch({ id })
</script>

<button type="button" onclick={() => switchApi().toggleChecked()}>Toggle</button>

<Switch.RootProvider value={switchApi}>
  <Switch.Control><Switch.Thumb /></Switch.Control>
  <Switch.Label>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`checked`	—	`false \| true` Whether the switch is checked.
`defaultChecked`	—	`false \| true` The checked state of the switch when it is first rendered. Use this when you do not need to control the state of the switch.
`disabled`	—	`false \| true` Whether the switch is disabled.
`form`	—	`string` The id of the form that the switch belongs to
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }>` The ids of the elements in the switch. Useful for composition.
`invalid`	—	`false \| true` If `true`, the switch is marked as invalid.
`label`	—	`string` Specifies the localized strings that identifies the accessibility elements and their states
`name`	—	`string` The name of the input field in a switch (Useful for form submission).
`readOnly`	—	`false \| true` Whether the switch is read-only
`required`	—	`false \| true` If `true`, the switch input is marked as required,
`value`	`"on"`	`string \| number` The value of switch input. Useful for form submission.

Emit	Event
`checkedChange`	`[details: CheckedChangeDetails]` Function to call when the switch is clicked.
`update:checked`	`[checked: boolean]` The callback fired when the model value changes.

Context

No serializable props or emits are declared for this part.

Control

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

HiddenInput

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

Label

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

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Thumb

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.
`checked`	—	`false \| true` Whether the switch is checked.
`disabled`	—	`false \| true` Whether the switch is disabled.
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }>` The ids of the elements in the switch. Useful for composition.
`invalid`	—	`false \| true` If `true`, the switch is marked as invalid.
`label`	—	`string` Specifies the localized strings that identifies the accessibility elements and their states
`name`	—	`string` The name of the input field in a switch (Useful for form submission).
`onCheckedChange`	—	`(details: CheckedChangeDetails) => void` Function to call when the switch is clicked.
`readOnly`	—	`false \| true` Whether the switch is read-only
`required`	—	`false \| true` If `true`, the switch input is marked as required,
`value`	`"on"`	`string \| number` The value of switch input. Useful for form submission.

Context

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

Control

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

HiddenInput

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

Label

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

RootProvider

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

Thumb

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`	—	`(props: (userProps?: solid_js185.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`checked`	—	`false \| true` Whether the switch is checked.
`defaultChecked`	—	`false \| true` The checked state of the switch when it is first rendered. Use this when you do not need to control the state of the switch.
`disabled`	—	`false \| true` Whether the switch is disabled.
`form`	—	`string` The id of the form that the switch belongs to
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }>` The ids of the elements in the switch. Useful for composition.
`invalid`	—	`false \| true` If `true`, the switch is marked as invalid.
`label`	—	`string` Specifies the localized strings that identifies the accessibility elements and their states
`name`	—	`string` The name of the input field in a switch (Useful for form submission).
`onCheckedChange`	—	`(details: CheckedChangeDetails) => void` Function to call when the switch is clicked.
`readOnly`	—	`false \| true` Whether the switch is read-only
`required`	—	`false \| true` If `true`, the switch input is marked as required,
`value`	`"on"`	`string \| number` The value of switch input. Useful for form submission.

Context

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

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js185.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js185.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js185.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseSwitchReturn`
`asChild`	—	`(props: (userProps?: solid_js185.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Thumb

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js185.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`checked`	—	`false \| true` Whether the switch is checked.
`children`	—	`Snippet<[]> \| undefined`
`defaultChecked`	—	`false \| true`
`disabled`	—	`false \| true` Whether the switch is disabled.
`form`	—	`string` The id of the form that the switch belongs to
`id`	—	`string`
`ids`	—	`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }>` The ids of the elements in the switch. Useful for composition.
`invalid`	—	`false \| true` If `true`, the switch is marked as invalid.
`label`	—	`string` Specifies the localized strings that identifies the accessibility elements and their states
`name`	—	`string` The name of the input field in a switch (Useful for form submission).
`onCheckedChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SwitchCheckedChangeDetails) => void` Function to call when the switch is clicked.
`readOnly`	—	`false \| true` Whether the switch is read-only
`required`	—	`false \| true` If `true`, the switch input is marked as required,
`value`	`"on"`	`string \| number` The value of switch input. Useful for form submission.

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseSwitchContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

HiddenInput

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseSwitchReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

Thumb

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`