Switch

Overview

The Switch component is a toggleable UI element that provides a visual way to turn options on or off. It's commonly used for boolean settings and preferences in forms and settings panels.

Features

• Multiple sizes (xs to xl)
• Color variants (primary and neutral)
• Support for custom icons in checked/unchecked states
• Loading state with spinner
• Optional label and description
• Required field indicator
• RTL support
• Accessible through keyboard navigation

Usage

Basic Switch

The simplest way to use the switch is with v-model binding:

<template>
  <div class="flex items-center gap-4">
    <MSwitch v-model="value1" />
    <MSwitch v-model="value2" />
  </div>
</template>

<script setup>
const value1 = ref(false)
const value2 = ref(true)
</script>

With Label and Description

Add context to your switch with labels and descriptions:

<template>
  <div class="space-y-4">
    <MSwitch
      v-model="notifications"
      label="Notifications"
      description="Receive notifications about important updates"
    />
    <MSwitch
      v-model="marketing"
      label="Marketing emails"
      description="Get the latest news and offers"
    />
  </div>
</template>

Sizes

Choose from five different sizes:

<template>
  <div class="flex flex-col gap-4">
    <MSwitch size="xs" label="Extra Small" />
    <MSwitch size="sm" label="Small" />
    <MSwitch size="md" label="Medium" />
    <MSwitch size="lg" label="Large" />
    <MSwitch size="xl" label="Extra Large" />
  </div>
</template>

Colors

Switch between primary and neutral colors:

<template>
  <div class="flex flex-col gap-4">
    <MSwitch color="primary" label="Primary Color" />
    <MSwitch color="neutral" label="Neutral Color" />
  </div>
</template>

States

Switches support various states including loading, disabled, and required:

<template>
  <div class="flex flex-col gap-4">
    <MSwitch loading label="Loading" />
    <MSwitch disabled label="Disabled" />
    <MSwitch required label="Required Field" />
  </div>
</template>

Custom Icons

Add custom icons for checked and unchecked states:

<template>
  <MSwitch
    v-model="darkMode"
    label="Dark Mode"
    checkedIcon="i-lucide-moon"
    uncheckedIcon="i-lucide-sun"
  />
</template>

Props

Slots

Events

Best Practices

1. Use clear and concise labels:
   • Make it obvious what the switch controls
   • Use positive statements (e.g., "Show notifications" instead of "Don't show notifications")
2. Choose appropriate sizes:
   • Use md size by default
   • Use larger sizes (lg, xl) for touch interfaces
   • Use smaller sizes (xs, sm) for dense UIs
3. Provide immediate feedback:
   • Use loading state for async operations
   • Add descriptions for complex options
   • Consider using icons to reinforce meaning
4. Accessibility considerations:
   • Always provide labels for screen readers
   • Use required prop when the field is mandatory
   • Ensure sufficient color contrast
5. Layout guidelines:
   • Group related switches together
   • Maintain consistent spacing
   • Align labels for better readability