The MtSwitch component provides a toggle switch for on/off states, similar to a checkbox but with a different visual representation.
import { MtSwitch } from '@meteroid/component-library';
v-model binding for the switch state.
Label text for the switch.
Marks the field as required.
Alternative to modelValue for controlled state.
Adds a border around the switch.
Help text with additional information.
Error object with a detail property.
Removes the default top margin.
The name attribute for the input.
Indicates if the value is inherited.
Enables inheritance functionality.
The inherited value when isInherited is true.
Emitted when the switch state changes.
Emitted when the switch is toggled.
Emitted when inheritance is removed.
Emitted when inheritance is restored.
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