Skip to main content

​
Overview

The Switch component is a toggle control that allows users to switch between checked and unchecked states. Built on Reka UI’s Switch primitive.

​
Basic usage

<template>
  <USwitch v-model="enabled" />
</template>

<script setup lang="ts">
const enabled = ref(false)
</script>

​
With label

<template>
  <USwitch v-model="notifications" label="Enable notifications" />
</template>

​
With description

<template>
  <USwitch
    v-model="enabled"
    label="Marketing emails"
    description="Receive emails about new products and features"
  />
</template>

​
With icons

<template>
  <USwitch
    v-model="enabled"
    checked-icon="i-lucide-check"
    unchecked-icon="i-lucide-x"
  />
</template>

​
Props

​
modelValue
boolean
The controlled state of the switch.
​
color
string
default:"'primary'"
The color of the switch.
​
size
'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'md'"
The size of the switch.
​
label
string
Label text displayed next to the switch.
​
description
string
Description text displayed below the label.
​
checkedIcon
string
Icon to display when switch is checked.
​
uncheckedIcon
string
Icon to display when switch is unchecked.
​
loading
boolean
Show loading state.
​
disabled
boolean
Disable the switch.
​
required
boolean
Mark as required for forms.

​
Events

​
update:modelValue
(value: boolean) => void
Emitted when the switch state changes.
​
change
(event: Event) => void
Emitted when the switch is toggled.

​
Slots

​
label
slot
Custom label content.
​
description
slot
Custom description content.

Build docs developers (and LLMs) love

Get started for freeTalk to us