Logo

Midnight Owl UI

Toggle

Stable v1.0.2

An on/off switch for settings and preferences, with optional icons inside the thumb to show which state is active.

Interactive Playground

Every prop, wired live. Adjust size, severity, and thumb icons and watch the code snippet update in real time.

Appearance
Small (sm)
Primary
State
Thumb Icons
Live Source Code
<Toggle
  v-model="value"
  iconOn="lucide:check"
  iconOff="lucide:x"
/>

Sizing Variants

Use the size prop to scale the toggle from xs to xl.

Template
<Toggle v-model="state" size="xs" />
<Toggle v-model="state" size="sm" />
<Toggle v-model="state" size="md" />
<Toggle v-model="state" size="lg" />
<Toggle v-model="state" size="xl" />

Severity & Icons

Pass iconOn and iconOff for visual feedback.

Template
<Toggle v-model="state" severity="success" icon-on="lucide:check" icon-off="lucide:x" />
<Toggle v-model="state" severity="secondary" icon-on="lucide:check" icon-off="lucide:x" />
<Toggle v-model="state" severity="danger" icon-on="lucide:check" icon-off="lucide:x" />
<Toggle v-model="state" severity="warning" icon-on="lucide:check" icon-off="lucide:x" />
<Toggle v-model="state" severity="info" icon-on="lucide:check" icon-off="lucide:x" />

Disabled State

Use the disabled prop for non-interactive controls.

Template
<Toggle v-model="state" disabled />

API Reference

Props

Name
Type / Signature
Default
Description
modelValue
boolean
false
The bound on/off state (use v-model).
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Dimensional size of the track and thumb.
severity
"primary" | "secondary" | "success" | "warning" | "danger" | "info"
"primary"
Semantic color of the track when on.
disabled
boolean
false
Disables interaction and dims the toggle.
iconOn
string
undefined
Lucide icon rendered inside the thumb when the toggle is on.
iconOff
string
undefined
Lucide icon rendered inside the thumb when the toggle is off.

Events

Event Name
Payload Signature
Description
@change
(value: boolean)
Fired whenever the toggle is switched.