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
| Slot | Props | Description |
|---|---|---|
default | - | The default slot is not used by this component. All content is 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.