VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div role="radiogroup" id="ui-rg-a9f0fbdf" class="flex flex-col gap-2">  <label for="ui-rg-item-c713375e" class="inline-flex items-center gap-2 select-none">
  <span class="relative inline-flex">
    <input id="ui-rg-item-c713375e" type="radio" value="free" checked="checked" name="plan" class="peer appearance-none shrink-0 rounded-full border border-input bg-background transition-all checked:bg-primary checked:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background w-4 h-4">
    <span class="pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 peer-checked:opacity-100 transition-opacity">
      <span class="w-2.5 h-2.5 rounded-full bg-primary-foreground"></span>
    </span></span>    <span class="text-sm leading-none">Free plan</span>
</label>  <label for="ui-rg-item-e0f5728e" class="inline-flex items-center gap-2 select-none">
  <span class="relative inline-flex">
    <input id="ui-rg-item-e0f5728e" type="radio" value="pro" name="plan" class="peer appearance-none shrink-0 rounded-full border border-input bg-background transition-all checked:bg-primary checked:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background w-4 h-4">
    <span class="pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 peer-checked:opacity-100 transition-opacity">
      <span class="w-2.5 h-2.5 rounded-full bg-primary-foreground"></span>
    </span></span>    <span class="text-sm leading-none">Pro plan — $9/mo</span>
</label>  <label for="ui-rg-item-862fbdd0" class="inline-flex items-center gap-2 select-none">
  <span class="relative inline-flex">
    <input id="ui-rg-item-862fbdd0" type="radio" value="enterprise" name="plan" class="peer appearance-none shrink-0 rounded-full border border-input bg-background transition-all checked:bg-primary checked:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background w-4 h-4">
    <span class="pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 peer-checked:opacity-100 transition-opacity">
      <span class="w-2.5 h-2.5 rounded-full bg-primary-foreground"></span>
    </span></span>    <span class="text-sm leading-none">Enterprise — Contact us</span>
</label></div>
1
2
3
4
5
render(UI::RadioGroup.new(name: name, value: value.presence, required: required, disabled: disabled)) do |rg|
  rg.with_item(value: "free", label: "Free plan")
  rg.with_item(value: "pro", label: "Pro plan — $9/mo")
  rg.with_item(value: "enterprise", label: "Enterprise — Contact us")
end

No notes provided.

Param Description Input

—

—

—

—