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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="space-y-6">
  <div>
    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Disabled</h3>
    <div role="radiogroup" id="ui-rg-83472abd" class="flex flex-col gap-2">  <label for="ui-rg-item-6f1e415b" class="inline-flex items-center gap-2 select-none cursor-not-allowed opacity-60">
        <span class="relative inline-flex">
          <input id="ui-rg-item-6f1e415b" type="radio" value="free" disabled="disabled" name="disabled_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 text-muted-foreground">Free plan</span>
      </label>  <label for="ui-rg-item-98ba7a10" class="inline-flex items-center gap-2 select-none cursor-not-allowed opacity-60">
        <span class="relative inline-flex">
          <input checked="checked" id="ui-rg-item-98ba7a10" type="radio" value="pro" disabled="disabled" name="disabled_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 text-muted-foreground">Pro plan (selected)</span>
      </label></div>
  </div>
  <div>
    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Individual item disabled</h3>
    <div role="radiogroup" id="ui-rg-feb4fe9f" class="flex flex-col gap-2">  <label for="ui-rg-item-3e4e8805" class="inline-flex items-center gap-2 select-none">
        <span class="relative inline-flex">
          <input id="ui-rg-item-3e4e8805" type="radio" value="free" checked="checked" name="partial_disabled" 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-e1de4697" class="inline-flex items-center gap-2 select-none cursor-not-allowed opacity-60">
        <span class="relative inline-flex">
          <input id="ui-rg-item-e1de4697" type="radio" value="pro" disabled="disabled" name="partial_disabled" 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 text-muted-foreground">Pro plan (unavailable)</span>
      </label>  <label for="ui-rg-item-234fc7a1" class="inline-flex items-center gap-2 select-none">
        <span class="relative inline-flex">
          <input id="ui-rg-item-234fc7a1" type="radio" value="enterprise" name="partial_disabled" 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</span>
      </label></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="space-y-6">
  <div>
    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Disabled</h3>
    <%= render(UI::RadioGroup.new(name: "disabled_plan", disabled: true)) do |rg| %>
      <% rg.with_item(value: "free", label: "Free plan") %>
      <% rg.with_item(value: "pro", label: "Pro plan (selected)", checked: true) %>
    <% end %>
  </div>
  <div>
    <h3 class="text-sm font-medium mb-2 text-muted-foreground">Individual item disabled</h3>
    <%= render(UI::RadioGroup.new(name: "partial_disabled", value: "free")) do |rg| %>
      <% rg.with_item(value: "free", label: "Free plan") %>
      <% rg.with_item(value: "pro", label: "Pro plan (unavailable)", disabled: true) %>
      <% rg.with_item(value: "enterprise", label: "Enterprise") %>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.