Forms
Animated Toggle
A switch that plays a quick scale pop when toggled on.
A toggle switch built on Nuxt UI's USwitch. When the switch is turned on, the whole control plays a quick 1 → 1.2 → 1 scale pop, giving the flip a tactile feel.
Usage
Use v-model to bind the toggle state.
<template>
<div class="flex w-full max-w-md justify-center">
<MAnimatedToggle v-model="enabled" />
</div>
</template>
<script setup lang="ts">
const enabled = ref(false)
</script>
Customize
Customize
Checked
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | false | The current checked state of the switch. Use with v-model to control the toggle. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | (value: boolean) => void | Emitted when the toggle state changes. |
Slots
MAnimatedToggle exposes no slots. The track and the thumb are rendered
internally.
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.animatedToggle in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | inline-flex |
Accessibility
The component renders Nuxt UI's USwitch (built on Reka UI's SwitchRoot), which provides role="switch", aria-checked, and keyboard navigation (Space/Enter to toggle), plus a visible focus ring.
Performance
- The pop uses
motion.divwith a fixed0.35stween that replays the keyframes[1, 1.2, 1]on every off → on transition. - Only the control's
scalechanges (a transform), so nothing reflows. - No timers, listeners, or DOM mutation beyond standard switch behavior.
The scale pop replays each time the switch is turned on, so the toggle feels tactile and responsive.