GitHub55X

Switch

Vue switch toggle for binary on and off settings with an accessible, thumb-style control.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/switch.json

Usage

      
      <script setup lang="ts">
import { Switch } from "@/components/ui/switch";
</script>

<template>
  <Switch.Root>
    <!-- … -->
  </Switch.Root>
</template>

Composition

      
      Switch.Root
├── Switch.Context
├── Switch.Control
├── Switch.HiddenInput
├── Switch.Label
├── Switch.RootProvider
├── Switch.Thumb

Examples

Sizes

Use the size prop on Switch.Root to change the size of the switch.

Controlled

For a controlled Switch component, the state of the toggle is managed using the checked prop, and updates when the onCheckedChange event handler is called:

Root Provider

An alternative way to control the switch is to use the RootProvider component and the useSwitch hook. This way you can access the state and methods from outside the component.

Field

The Field component helps manage form-related state and accessibility attributes of a switch. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

Context

Access the switch's state with Switch.Context or the useSwitchContext hook. This lets you customize the component based on its current state:

API

See Ark UI Switch docs for full props and examples.

StepsTable