Switch
A boolean toggle with sizes, color variants, optional loading state, and slot-overridable label and description text. Toggle Vue / CSS to switch the live demo and source together.
Basic
Single switch with a label.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Colors
All built-in color variants.
Vue SFC
States
Disabled, loading and pre-checked.
Vue SFC
Description
Switch with a secondary description line.
Vue SFC
Slots
Custom label and description via named slots.
Vue SFC
Event: change
Listen to mno-change to react to toggling.
Vue SFC
Event log
Live log of mno-change events.
Vue SFC
Customized
Override per-element styling with cssClass (Vue) or utility classes (CSS).
Vue SFC
Card recipe
Compose a card-style switch with your own CSS — the library ships no helper.
Vue SFC
Types
Import
import { SwitchProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Two-way bound on/off state of the switch. |
checked | boolean | false | Whether the switch is checked (kept in sync with modelValue). |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme of the switch. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the switch. |
disabled | boolean | false | Disables interaction with the switch. |
loading | boolean | false | Shows a loading state and blocks interaction. |
label | string | '' | Text label shown next to the switch. |
description | string | '' | Secondary description text shown under the label. |
value | string | '' | Value submitted with the form when checked. |
name | string | '' | Form field name for the underlying input. |
ariaLabelText | string | — | Accessible label for screen readers. |
ariaLabel | string | — | — |
cssClass | SwitchCssClass | {} | Per-part class overrides for styling internal elements. |