Switch

A toggle for one setting that takes effect as soon as it flips.

Email notificationsGet notified about new activity

Two-factor authManaged by your organization

Beta featuresNot available on your plan

1<template>2  <div class="flex items-center justify-between gap-4">3    <div class="flex flex-col gap-0.5">4      <span class="text-sm font-medium text-text-primary">Email notifications</span>5      <span class="text-xs text-text-tertiary">Get notified about new activity</span>6    </div>7    <Switch v-model="enabled" />8  </div>9</template>

Props

Name	Type	Default
modelValue	boolean	-
disabled	boolean	false
loading	boolean	false
...props	USwitch props (color, size, label, description, icon, checkedIcon, uncheckedIcon, ...)	-

Guidelines

Do

Use for a single boolean setting that takes effect immediately, with no separate "Save" step - e.g. enabling email notifications, toggling a repo's PR scans on.
Pair it with your own label/description text next to it (as every real usage in this codebase does) rather than the native label/description props, which nothing here currently relies on.
Drive loading from a mutation's isPending state rather than v-model alone - toggling a Switch immediately persists to the backend, unlike a form field submitted later.

Don't

Don't use inside a form that requires an explicit submit action - use Checkbox instead, which reads as a pending choice rather than an immediate change.
Don't use for more than two states - use RadioGroup or Select instead.