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
20
21
22
23
24
<div class="space-y-6">
  <div>
    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Required</h3>
    <div role="radiogroup" id="ui-rg-78900b04" class="flex flex-col gap-2">  <label for="ui-rg-item-6ea4ac64" class="inline-flex items-center gap-2 select-none">
        <span class="relative inline-flex">
          <input id="ui-rg-item-6ea4ac64" type="radio" value="free" required="required" name="required_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 class="text-destructive ml-0.5"> *</span></span>
      </label>  <label for="ui-rg-item-2cebfebd" class="inline-flex items-center gap-2 select-none">
        <span class="relative inline-flex">
          <input id="ui-rg-item-2cebfebd" type="radio" value="pro" checked="checked" required="required" name="required_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 class="text-destructive ml-0.5"> *</span></span>
      </label>  <label for="ui-rg-item-aa9b5c8e" class="inline-flex items-center gap-2 select-none">
        <span class="relative inline-flex">
          <input id="ui-rg-item-aa9b5c8e" type="radio" value="enterprise" required="required" name="required_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 class="text-destructive ml-0.5"> *</span></span>
      </label></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="space-y-6">
  <div>
    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Required</h3>
    <%= render(UI::RadioGroup.new(name: "required_plan", value: "pro", required: true)) 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 %>
  </div>
</div>

No notes provided.

No params configured.