Switch

Source

<script setup lang="ts">
import { ref } from "vue";
import MtSwitch from "@shopware-ag/meteor-component-library/MtSwitch";

const enabled = ref(false);
</script>

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

Usage

Switch is a direct on or off control for a single binary setting that takes effect immediately. Use it in forms or settings screens where users expect a quick toggle interaction and the on or off state is easy to understand without extra confirmation.

import { MtSwitch } from "@shopware-ag/meteor-component-library";

Examples

States

<script setup lang="ts">
import MtSwitch from "@shopware-ag/meteor-component-library/MtSwitch";
</script>

<template>
  <mt-switch :model-value="false" label="Off" />
  <mt-switch :model-value="true" label="On" />
  <mt-switch :model-value="true" label="Disabled" :disabled="true" />
</template>

API reference

Props

Prop	Type	Default
`model-value`	`boolean`
`label`	`string`
`is-inherited`	`boolean`
`is-inheritance-field`	`boolean`
`inherited-value`	`boolean`
`required`	`boolean`
`disabled`	`boolean`
`checked`	`boolean`
`bordered`	`boolean`
`help-text`	`string`
`error`	`{ detail: string; }`
`remove-top-margin`	`boolean`
`name`	`string`

Events

Event	Payload
`update:modelValue`	`[value: boolean]`
`change`	`[value: boolean]`
`inheritance-remove`	`[]`
`inheritance-restore`	`[]`

Best practices

Use a clear label that describes the setting, not just the current state.
Use Switch for immediate preferences or feature toggles.
Add help text when users need more context about the effect of changing the setting.

Don't

Do not use Switch for multi-select choices.
Do not use it when turning something on or off requires additional explanation or confirmation.
Do not rely on the visual position of the thumb alone to communicate state.

Behavior

Switch supports a binary on or off value through modelValue.
The component also supports shared field patterns such as error, helpText, inheritance handling, and bordered presentation.
Because Switch is meant for direct toggling, it works best when users can understand the outcome immediately.

Accessibility

Use a visible label that clearly explains what the toggle controls.
Make sure the setting makes sense when announced with its checked or unchecked state by assistive technology.
Avoid using Switch for critical actions where accidental toggling would be risky.

Checkbox: when users are selecting items or confirming a value as part of a broader form submission flow.

Edit this pageorReport an issue

Snackbar

Temporary overlay feedback shown near the bottom-right corner of the interface for non-critical, short-lived messages.

Tabs

A compact navigation control for switching between related views within the same context.