UNPKG

@mozaic-ds/vue

Version:

Mozaic-Vue is the Vue.js implementation of ADEO Design system

22 lines (15 loc) 1.19 kB
# MToggle A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback. ## Props | Name | Description | Type | Default | | --- | --- | --- | --- | | `id*` | A unique identifier for the toggle, used to associate the label with the form element. | `string` | - | | `name` | The name attribute for the toggle element, typically used for form submission. | `string` | - | | `label` | The text label displayed next to the toggle. | `string` | - | | `modelValue` | The toggle's checked state, bound via v-model. | `boolean` | - | | `size` | Determines the size of the toggle. | `"s"` `"m"` | `"s"` | | `disabled` | If `true`, disables the toggle, making it non-interactive. | `boolean` | - | ## Events | Name | Description | Type | | --- | --- | --- | | `update:modelValue` | Emits when the toggle value changes, updating the modelValue prop. | [value: boolean] |