Checkbox

Source

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

<template>
  <mt-checkbox label="Checkbox" />
</template>

Usage

Checkbox is an independent on or off control for boolean values and multi-select lists. Use it when users can turn an option on or off without affecting other options, when multiple options in a group can be selected at the same time, or for form fields that should submit a boolean value.

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

Examples

States

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

<template>
  <mt-checkbox label="Unchecked" />
  <mt-checkbox label="Checked" :model-value="true" />
  <mt-checkbox label="Disabled" disabled :model-value="true" />
  <mt-checkbox label="Partial selection" :model-value="false" partial />
</template>

API reference

Props

Prop	Type	Default
`name` The name of the input field when submitting a form.	`string`	`undefined`
`map-inheritance`	`Record<string, any>`	`null`
`error` Error object for this field.	`Record<string, any>`	`null`
`label` A label for the checkbox.	`string`	`undefined`
`required` Marks the field as required with an asterix.	`boolean`	`false`
`is-inherited` Determines if the field is inherited.	`boolean`	`false`
`help-text` Help text with additional information for the field.	`string`	`null`
`disabled` Toggles the disabled state of the checkbox.	`boolean`	`false`
`model-value` v-model binding for the checkbox value.	`boolean`	`undefined`
`checked` Determines the checked state of the checkbox.	`boolean`	`undefined`
`partial` Determines if the field is partially checked.	`boolean`	`false`
`inherited-value` Inherited value from another SalesChannel.	`boolean`	`null`
`bordered` Determines if the field is surrounded by a border.	`boolean`	`false`
`on-update:model-value`	`((...args: any[]) => any) \| undefined`
`on-change`	`((...args: any[]) => any) \| undefined`
`on-inheritance-remove`	`((...args: any[]) => any) \| undefined`
`on-inheritance-restore`	`((...args: any[]) => any) \| undefined`
`on-update:checked`	`((...args: any[]) => any) \| undefined`

Exposed

Name	Type
`checkboxClasses`	`{ "mt-switch--future-remove-default-margin": any; }`
`id`	`string`
`currentValue`	`boolean`
`formFieldName`	`string`
`MtCheckboxFieldClasses`	`{ "has--error": boolean; "is--disabled": boolean; "is--inherited": boolean; "is--bordered": boolean; "is--partly-checked": boolean; }`
`identification`	`string`
`hasError`	`boolean`
`inputState`	`boolean`
`isInheritanceField`	`boolean`
`isInheritedComputed`	`boolean`
`isDisabled`	`boolean`
`isPartlyChecked`	`boolean`
`iconName`	`string`

Best practices

Use short, clear labels that describe the checked state in plain language.
Use help text when the effect of the option is not obvious from the label alone.
Use the indeterminate state only when the checkbox represents a mixed selection.

Don't

Do not use Checkbox for mutually exclusive options.
Do not use the indeterminate state as a permanent third value.
Do not rely on the checkmark alone without a visible label.

Behavior

Prefer v-model with modelValue and update:modelValue for new code. The checked prop and change event are legacy APIs.
partial shows an indeterminate visual state. It is useful for parent selections with mixed child states.
inheritedValue and isInherited support inheritance fields. An inherited Checkbox is disabled until inheritance is removed.
helpText, error, required, and bordered integrate with the shared field wrapper.

Accessibility

Always provide a visible label, either through the label prop or the label slot.
Checkbox uses a native checkbox input, so it supports standard keyboard interaction such as toggling with the Space key.
If the indeterminate state needs explanation, describe its meaning in nearby text instead of relying on the visual state alone.

Radio Group: when users must choose exactly one option from a small set of visible choices.
Select: when users need to choose from a longer list or when space is limited.

Edit this pageorReport an issue

Chart

A data visualization for showing how values change over time.

Collapsible

An interactive container that expands and collapses related content behind a trigger.