Switch

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

1 fichier

Installation

pyblade-ui add switch

Copiez ce fichier dans votre projet

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>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.switch> est disponible dans tous vos templates.

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

Exemples

Dans un formulaire

<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">Emails marketing</pb-ui.label>
      <p class="text-sm text-muted-foreground">Nouveautés et offres.</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">Alertes de sécurité</pb-ui.label>
      <p class="text-sm text-muted-foreground">Connexions inhabituelles.</p>
    </div>
    <pb-ui.switch id="security" checked />
  </div>
</div>

‹ Radio group Slider ›