Switch

Toggle switch with multiple aesthetic variants: native pill toggle, Skeuomorphic 3D embossed rocker, Flat 2D, and Neumorphic soft rocker.

<x-switch>

Native Pill Switch

Default Veldora switch using CSS accent-color. Animates thumb smoothly between off/on states.

Email Notifications Auto Sync

<x-switch name="notifications" label="Email Notifications" :checked="true" />
<x-switch name="sync" label="Auto Sync" />

Skeuomorphic 3D Embossed Toggle

Physically realistic switch with inset groove, reflective thumb, and active violet accent glow.

Enable 2FA Authentication Dark Mode Preference Background Sync

<x-switch variant="skeuomorphic" name="twofa" label="Enable 2FA Authentication" :checked="true" />
<x-switch variant="skeuomorphic" name="darkmode" label="Dark Mode Preference" />

Flat 2D Toggle

No gradients, no shadows — just clean geometry. Accent fill on active, muted grey on off.

Analytics Collection Marketing Emails

<x-switch variant="flat" name="analytics" label="Analytics Collection" :checked="true" />
<x-switch variant="flat" name="marketing" label="Marketing Emails" />

Neumorphic Soft Rocker

Carved inset track with extruded thumb that lifts and glows violet when activated.

Biometric Login Auto Backup

<x-switch variant="neumorphic" name="biometric" label="Biometric Login" :checked="true" />
<x-switch variant="neumorphic" name="backup" label="Auto Backup" />

← Previous Dropdown Next → DataTable