V Vultra UI

Switch (MD3)

Material Design 3 switch for binary on/off states — track + thumb with ripple press feedback.

Preview

<script>
  import { Switch } from '@vultra/md3';
</script>

<div class="flex flex-col gap-3">
  <div class="flex items-center gap-3">
    <Switch checked />
    <span>Wi-Fi</span>
  </div>
  <div class="flex items-center gap-3">
    <Switch />
    <span>Bluetooth</span>
  </div>
  <div class="flex items-center gap-3">
    <Switch disabled />
    <span class="text-[var(--ui-muted-foreground)]">Disabled</span>
  </div>
</div>

Usage

<script>
  import { Switch } from '@vultra/md3';
  let enabled = $state(true);
</script>

<Switch bind:checked={enabled} />

Props

PropTypeDefaultDescription
checkedbooleanfalseToggle state (bindable)
disabledbooleanfalseDisable interaction
classstring—Extra classes

Features

  • MD3 track + thumb styling
  • Press ripple feedback (isPressed state)
  • $bindable checked for two-way binding
  • Touch-friendly 44px+ hit target

Install

npx @vultra/cli add switch

From the @vultra/md3 package.

Related