Components

Switch

Let users toggle a setting on or off.

Import

import { Switch } from "@dr-max/ui/switch"

The entry carries its own precompiled CSS (including the styles of the Required and Spinner parts it composes) — no extra style imports needed.

Usage

The on/off state is controlled — bind it with v-model:

Email notifications

<script setup lang="ts">
import { Switch } from "@dr-max/ui/switch"
import { ref } from "vue"

const notifications = ref(true)
</script>

<template>
  <Switch v-model="notifications" label="Email notifications" />
</template>

Required

required marks the native input as required and renders the visual required indicator:

Accept data processing

<template>
  <Switch v-model="accepted" label="Accept data processing" required />
</template>

Disabled and loading

disabled disables the native input; loading shows a spinner and disables interaction:

Unavailable setting

Saving your preference

<template>
  <Switch v-model="unavailable" label="Unavailable setting" disabled />
  <Switch v-model="saving" label="Saving your preference" loading />
</template>

Validation errors

errors render below the switch once validation is touched:

Accept data processing

You must accept data processing

<template>
  <Switch
    v-model="accepted"
    label="Accept data processing"
    :touched="true"
    :errors="[{ label: 'You must accept data processing', param: 'required' }]"
  />
</template>

Custom label

The default slot takes precedence over the label prop when the label needs markup:

<template>
  <Switch v-model="accepted">
    Accept <a href="/privacy">data processing</a>
  </Switch>
</template>

Playground

Email notifications

label

modelValue

required

disabled

<script setup lang="ts">
import { Switch } from '@dr-max/ui/switch'
</script>

<template>
  <Switch label="Email notifications" model-value />
</template>