Switch

Switch lets users choose between two opposing states, applying the change immediately with no submit action needed.

@volvo-cars/css v2.5.1

Switch button

Enable notifications

Show codeHide code

<label class="flex-row gap-x-16 items-center justify-between">
  Enable notifications
  <button type="button" role="switch" aria-checked="false"></button>
</label>

Switch group

Enable notifications Marketing emails Product updates

Show codeHide code

<div class="flex-col gap-16">
  <label class="flex-row gap-x-16 items-center justify-between">
    Enable notifications
    <input type="checkbox" role="switch" />
  </label>
  <label class="flex-row gap-x-16 items-center justify-between">
    Marketing emails
    <input type="checkbox" role="switch" />
  </label>
  <label class="flex-row gap-x-16 items-center justify-between">
    Product updates
    <input type="checkbox" role="switch" checked />
  </label>
</div>