Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shopware/meteor/llms.txt

Use this file to discover all available pages before exploring further.

The MtSwitch component provides a toggle switch for on/off states, similar to a checkbox but with a different visual representation.

​
Import

import { MtSwitch } from '@meteroid/component-library';

​
Props

​
modelValue
boolean
v-model binding for the switch state.
​
label
string
Label text for the switch.
​
disabled
boolean
default:"false"
Disables the switch.
​
required
boolean
default:"false"
Marks the field as required.
​
checked
boolean
Alternative to modelValue for controlled state.
​
bordered
boolean
default:"false"
Adds a border around the switch.
​
helpText
string
Help text with additional information.
​
error
object
Error object with a detail property.
​
removeTopMargin
boolean
default:"false"
Removes the default top margin.
​
name
string
The name attribute for the input.
​
isInherited
boolean
default:"false"
Indicates if the value is inherited.
​
isInheritanceField
boolean
default:"false"
Enables inheritance functionality.
​
inheritedValue
boolean
The inherited value when isInherited is true.

​
Events

​
update:modelValue
(value: boolean) => void
Emitted when the switch state changes.
​
change
(value: boolean) => void
Emitted when the switch is toggled.
​
inheritance-remove
() => void
Emitted when inheritance is removed.
​
inheritance-restore
() => void
Emitted when inheritance is restored.

​
Usage

​
Basic Switch

<script setup>
import { ref } from 'vue';
const enabled = ref(false);
</script>

<template>
  <mt-switch 
    v-model="enabled"
    label="Enable notifications"
  />
</template>

​
Bordered Switch

<template>
  <mt-switch 
    v-model="darkMode"
    label="Dark mode"
    bordered
  />
</template>

​
With Help Text

<template>
  <mt-switch 
    v-model="autoSave"
    label="Auto-save"
    help-text="Automatically save changes every 5 minutes"
  />
</template>

​
Disabled Switch

<template>
  <mt-switch 
    v-model="premium"
    label="Premium features"
    disabled
  />
</template>

​
With Error State

<script setup>
import { ref, computed } from 'vue';
const termsAccepted = ref(false);
const error = computed(() => 
  !termsAccepted.value ? { detail: 'You must accept the terms' } : null
);
</script>

<template>
  <mt-switch 
    v-model="termsAccepted"
    label="I accept the terms and conditions"
    :error="error"
    required
  />
</template>

​
Multiple Switches

<script setup>
import { ref } from 'vue';
const settings = ref({
  notifications: true,
  marketing: false,
  analytics: true,
});
</script>

<template>
  <div>
    <mt-switch v-model="settings.notifications" label="Notifications" />
    <mt-switch v-model="settings.marketing" label="Marketing emails" />
    <mt-switch v-model="settings.analytics" label="Analytics" />
  </div>
</template>

​
Accessibility

  • Uses native checkbox input with custom styling
  • Label is clickable and properly associated
  • Keyboard accessible (Space to toggle)
  • Focus visible outline for keyboard navigation
  • Disabled state prevents interaction
  • ARIA attributes for screen readers
  • Required state marked with asterisk

Build docs developers (and LLMs) love

Get started for freeTalk to us