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
Compose a card-style switch with your own CSS — the library ships no helper. The .switch-card class is applied to the root via cssClass (Vue) / directly (CSS).
Vue SFC
CSS Variables
Vue SFC
Every switch is themed through --mono-switch-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-switch> and the shadow build. The color prop sets the accent, but an explicit --mono-switch-accent override always wins. To re-skin globally, set the underlying --theme-* tokens — they feed the defaults below.
| Variable | Default | Controls |
|---|---|---|
--mono-switch-accent | --theme-primary | Track color when on (set by color) |
--mono-switch-track-off | theme border mix | Track color when off |
--mono-switch-track-off-hover | primary mix | Off-track color on hover |
--mono-switch-thumb | #ffffff | Thumb color |
--mono-switch-thumb-shadow | 0 1px 3px … | Thumb shadow |
--mono-switch-shadow | 0 1px 2px … | Track shadow |
--mono-switch-ring | primary 22% | Focus-visible ring color |
--mono-switch-text | --theme-text | Label text color |
--mono-switch-description | #6b7280 | Description text color |
--mono-switch-gap | 0.75rem | Gap between control and label |
Types
Import
import { SwitchProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | — | Two-way bound on/off state of the switch. |
checked | boolean | — | Whether the switch is checked (kept in sync with modelValue). |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | — | Color theme of the switch. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | Size of the switch. |
disabled | boolean | — | Disables interaction with the switch. |
loading | boolean | — | 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. |
visible | boolean | — | Whether the control is shown. Defaults to `true`. |
visibleType | 'invisible' | 'none' | — | How it hides when `visible` is `false`. Defaults to `'none'`. |