DocsComponentsRadio group

Radio group

A set of options where only one can be chosen, on native radios.

2 files

<pb-ui.radio-group>
  <label class="flex items-center gap-3 text-sm"><pb-ui.radio-group-item name="density" value="default" /> Default</label>
  <label class="flex items-center gap-3 text-sm"><pb-ui.radio-group-item name="density" value="comfortable" checked /> Comfortable</label>
  <label class="flex items-center gap-3 text-sm"><pb-ui.radio-group-item name="density" value="compact" /> Compact</label>
</pb-ui.radio-group>

Installation

pyblade-ui add radio-group

Copy these files into your project

components/ui/radio_group.html

<div role="radiogroup" data-slot="radio-group" {{ attributes.cn("grid gap-3") }}>{{ slot }}</div>

components/ui/radio_group_item.html

<span data-slot="radio-group-item" class="relative inline-flex size-4 shrink-0">
  <input type="radio" {{ attributes.cn(
      "peer aspect-square size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-input shadow-xs transition-[color,box-shadow] outline-none checked:border-primary disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30",
      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive",
  ) }} />
  <span class="pointer-events-none absolute top-1/2 left-1/2 hidden size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary peer-checked:block"></span>
</span>

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

Usage

The tags <pb-ui.radio-group> <pb-ui.radio-group-item> are available in all your templates.

<pb-ui.radio-group>
  <label class="flex items-center gap-3"><pb-ui.radio-group-item name="plan" value="free" checked /> Free</label>
  <label class="flex items-center gap-3"><pb-ui.radio-group-item name="plan" value="pro" /> Pro</label>
</pb-ui.radio-group>

Examples

Choice cards

<pb-ui.radio-group class="w-full max-w-sm">
  <label class="flex cursor-pointer items-start gap-3 rounded-lg border p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5">
    <pb-ui.radio-group-item name="plan" value="starter" class="mt-0.5" checked />
    <div class="grid gap-1"><span class="text-sm font-medium">Starter</span><span class="text-sm text-muted-foreground">For personal projects.</span></div>
  </label>
  <label class="flex cursor-pointer items-start gap-3 rounded-lg border p-4 has-[:checked]:border-primary has-[:checked]:bg-primary/5">
    <pb-ui.radio-group-item name="plan" value="pro" class="mt-0.5" />
    <div class="grid gap-1"><span class="text-sm font-medium">Pro</span><span class="text-sm text-muted-foreground">For growing teams.</span></div>
  </label>
</pb-ui.radio-group>

‹ Checkbox Switch ›