Checkbox

A native checkbox, styled.

1 file

Installation

pyblade-ui add checkbox

Copy this file into your project

components/ui/checkbox.html

<span data-slot="checkbox" class="relative inline-flex size-4 shrink-0">
  <input type="checkbox" {{ attributes.cn(
      "peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-input shadow-xs transition-shadow outline-none checked:border-primary checked:bg-primary disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:checked:bg-primary",
      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive",
  ) }} />
  <svg class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-primary-foreground peer-checked:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
</span>

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

Usage

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

<pb-ui.checkbox id="terms" name="terms" />

Examples

With a description

<div class="flex items-start gap-3">
  <pb-ui.checkbox id="news" />
  <div class="grid gap-1.5">
    <pb-ui.label for="news">Subscribe to the newsletter</pb-ui.label>
    <p class="text-sm text-muted-foreground">One email a month, never more.</p>
  </div>
</div>

Disabled

‹ Combobox Radio group ›