Switch

A toggle between on and off, on a native checkbox.

1 file

Installation

pyblade-ui add switch

Copy this file into your project

components/ui/switch.html

<span data-slot="switch" class="relative inline-flex h-[1.15rem] w-8 shrink-0">
  <input type="checkbox" role="switch" {{ attributes.cn(
      "peer h-[1.15rem] w-8 shrink-0 cursor-pointer appearance-none rounded-full border border-transparent bg-input shadow-xs transition-all outline-none checked:bg-primary disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/80 dark:checked:bg-primary",
      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
  ) }} />
  <span class="pointer-events-none absolute top-1/2 left-px size-4 -translate-y-1/2 rounded-full bg-background ring-0 transition-transform peer-checked:translate-x-[calc(100%-2px)] dark:bg-foreground dark:peer-checked:bg-primary-foreground"></span>
</span>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.switch> is available in all your templates.

<pb-ui.switch name="notifications" checked />

Examples

In a form

<div class="w-full max-w-md space-y-3">
  <div class="flex items-center justify-between rounded-lg border p-4">
    <div class="space-y-0.5">
      <pb-ui.label for="marketing">Marketing emails</pb-ui.label>
      <p class="text-sm text-muted-foreground">News and offers.</p>
    </div>
    <pb-ui.switch id="marketing" />
  </div>
  <div class="flex items-center justify-between rounded-lg border p-4">
    <div class="space-y-0.5">
      <pb-ui.label for="security">Security alerts</pb-ui.label>
      <p class="text-sm text-muted-foreground">Unusual sign-ins.</p>
    </div>
    <pb-ui.switch id="security" checked />
  </div>
</div>

‹ Radio group Slider ›