Preview

Installation

npx sigma-ui@latest add switch

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';

const airplaneMode = ref(false);
</script>

<template>
  <div class="flex items-center gap-2">
    <Switch
      id="airplane-mode"
      v-model="airplaneMode"
    />
    <Label for="airplane-mode">Airplane Mode</Label>
  </div>
</template>

• v-model is a boolean. Use defaultValue instead for an uncontrolled switch.
• Give the switch an id and point a Label at it with for, so the label is announced and clicking it toggles the switch.

Examples

Form

API Reference

Switch

Props

Prop	Type	Default
defaultValue The state of the switch when it is initially rendered. Use when you do not need to control its state.	boolean	-
modelValue The controlled state of the switch. Can be bind as v-model.	boolean | null	-
disabled When true, prevents the user from interacting with the switch.	boolean	-
id	string	-
value The value given as data when submitted with a name.	string	-
trueValue The value used when the switch is on. Defaults to true.	boolean	-
falseValue The value used when the switch is off. Defaults to false.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue Event handler called when the value of the switch changes.	[payload: boolean]

Accessibility

Adheres to the Switch WAI-ARIA design pattern. Reka UI renders it as a button with role="switch" and aria-checked.

Key	Description
Tab	Moves focus to the switch.
Space	Toggles the switch.
Enter	Toggles the switch.