Skip to main content
The MtCheckbox component allows users to toggle between checked and unchecked states.

​
Import

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

​
Props

​
modelValue
boolean
v-model binding for the checkbox value.
​
label
string
A label for the checkbox.
​
name
string
The name of the input field when submitting a form.
​
disabled
boolean
default:"false"
Toggles the disabled state of the checkbox.
​
checked
boolean
Deprecated: Use v-model instead. Determines the checked state of the checkbox.
​
partial
boolean
default:"false"
Determines if the field is partially checked (indeterminate state).
​
bordered
boolean
default:"false"
Determines if the field is surrounded by a border.
​
required
boolean
default:"false"
Marks the field as required with an asterisk.
​
helpText
string
Help text with additional information for the field.
​
error
object
Error object for this field.
​
isInherited
boolean
default:"false"
Determines if the field is inherited.
​
inheritedValue
boolean
Inherited value from another SalesChannel.

​
Events

​
update:modelValue
(value: boolean) => void
Emitted when the checkbox value changes.
​
change
(value: boolean) => void
Deprecated: Use update:modelValue instead.
​
inheritance-remove
() => void
Emitted when inheritance is removed.
​
inheritance-restore
() => void
Emitted when inheritance is restored.

​
Slots

​
label
slot
Custom label content.

​
Usage

​
Basic Checkbox

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

<template>
  <mt-checkbox 
    v-model="agreed"
    label="I agree to the terms and conditions"
  />
</template>

​
Checkbox with Help Text

<template>
  <mt-checkbox 
    v-model="subscribed"
    label="Subscribe to newsletter"
    help-text="Receive weekly updates about new features"
  />
</template>

​
Bordered Checkbox

<template>
  <mt-checkbox 
    v-model="enabled"
    label="Enable feature"
    bordered
  />
</template>

​
Indeterminate State

<template>
  <mt-checkbox 
    v-model="someChecked"
    label="Select all"
    :partial="someChildrenChecked && !allChildrenChecked"
  />
</template>

​
Accessibility

  • Uses native checkbox input with proper ARIA attributes
  • Label is clickable and associated with input via for attribute
  • Disabled state prevents interaction and changes cursor
  • Focus visible outline for keyboard navigation
  • Required fields marked with asterisk

Build docs developers (and LLMs) love

Get started for freeTalk to us