@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
21 lines (14 loc) • 1.36 kB
Markdown
# MToggleGroup
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.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#toggle-group).
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `name*` | The name attribute for the toggle element, typically used for form submission. | `string` | - |
| `modelValue` | Property used to manage the values checked by v-model
(Do not use directly) | `string[]` | - |
| `options*` | List of properties of each toggle of the toggle group. | `{ id: string; label: string; value: string; disabled?: boolean` `undefined; size?: "s"` `"m"` `undefined; }[]` | - |
| `inline` | If `true`, make the form element of the group inline. | `boolean` | - |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `update:modelValue` | Emits when the toggle group value changes, updating the modelValue prop. | [value: Array<string>] |