LoopOS UI v1.1.29.0

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<fieldset class="space-y-3 max-w-sm w-full">
<legend class="sr-only">Choose your plan</legend>
<label for="pricing-startup" class="lui-radio_card">
  <input type="radio" id="pricing-startup" name="pricing" value="startup" class="lui-radio_card__input">
  <div class="flex-1 ml-8">
    <div class="lui-radio_card__content__compact-only">
      <div class="lui-header lui-header--small lui-header--gapless">
        <div class="lui-header__title_container">
          <span class="lui-header__title_container__title">
            Current value
          </span>
        </div>
  <span class="lui-header__description">
          Generated manually in Submission
        </span>
      </div>
      <div class="lui-radio_card__content__compact-only__price">
        <span class="lui-label" style="color: #1a883f; background-color: #f3f9f5;">
          <span class="lui-label__text">Agreed</span>
        </span>
        <span class="text-heading-20 whitespace-nowrap">200,00€</span>
      </div>
    </div>
  </div>
</label>  <label for="pricing-pro" class="lui-radio_card">
  <input type="radio" id="pricing-pro" name="pricing" value="pro" checked="checked" class="lui-radio_card__input">
  <div class="flex-1 ml-8">
    <div class="lui-radio_card__content__compact-only">
      <div class="lui-header lui-header--small lui-header--gapless">
        <div class="lui-header__title_container">
          <span class="lui-header__title_container__title">
            Current value
          </span>
        </div>
  <span class="lui-header__description">
          Generated manually in Submission
        </span>
      </div>
      <div class="lui-radio_card__content__compact-only__price">
        <span class="lui-label" style="color: #1a883f; background-color: #f3f9f5;">
          <span class="lui-label__text">Agreed</span>
        </span>
        <span class="text-heading-20 whitespace-nowrap">200,00€</span>
      </div>
    </div>
  </div>
</label>  <label for="pricing-enterprise" class="lui-radio_card">
  <input type="radio" id="pricing-enterprise" name="pricing" value="enterprise" disabled="disabled" class="lui-radio_card__input">
  <div class="flex-1 ml-8">
    <div class="lui-radio_card__content__compact-only">
      <div class="lui-header lui-header--small lui-header--gapless">
        <div class="lui-header__title_container">
          <span class="lui-header__title_container__title">
            Current value
          </span>
        </div>
  <span class="lui-header__description">
          Generated manually in Submission
        </span>
      </div>
      <div class="lui-radio_card__content__compact-only__price">
        <span class="lui-label" style="color: #1a883f; background-color: #f3f9f5;">
          <span class="lui-label__text">Agreed</span>
        </span>
        <span class="text-heading-20 whitespace-nowrap">200,00€</span>
      </div>
    </div>
  </div>
</label></fieldset>

RadioCard

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<fieldset class="space-y-3 max-w-sm w-full">
  <legend class="sr-only">Choose your plan</legend>
  <%= render LooposUi::RadioCard.new(value: "startup", name: "pricing", checked: false) do %>
    <%= render LooposUi::RadioCard::Content.new(kind: :compact, price: "200,00€") do |content| %>
      <% content.with_header(title: "Current value", description: "Generated manually in Submission", size: :small, gapless: true) %>
      <% content.with_label_tag(text: "Agreed", color: :success) %>
    <% end %>
  <% end %>
  <%= render LooposUi::RadioCard.new(value: "pro", name: "pricing", checked: true) do %>
    <%= render LooposUi::RadioCard::Content.new(kind: :compact, price: "200,00€") do |content| %>
      <% content.with_header(title: "Current value", description: "Generated manually in Submission", size: :small, gapless: true) %>
      <% content.with_label_tag(text: "Agreed", color: :success) %>
    <% end %>
  <% end %>
  <%= render LooposUi::RadioCard.new(value: "enterprise", name: "pricing", checked: false, disabled: true) do %>
    <%= render LooposUi::RadioCard::Content.new(kind: :compact, price: "200,00€") do |content| %>
      <% content.with_header(title: "Current value", description: "Generated manually in Submission", size: :small, gapless: true) %>
      <% content.with_label_tag(text: "Agreed", color: :success) %>
    <% end %>
  <% end %>
</fieldset>

No notes provided.

No params configured.

RadioCard Component

A customizable radio button component that renders as a card-style interface, perfect for selecting options in forms or configuration panels. It supports both custom content and a built-in Content component for structured layouts.

Usage

<%= render LooposUi::RadioCard.new(
  value: "option1", 
  name: "group_name", 
  checked: false, 
  disabled: false
) do %>
  <!-- Custom content or RadioCard::Content component -->
<% end %>

Parameters

Parameter Type Default Description
value String Required The value of the radio button
name String Required The name attribute for the radio button group
checked Boolean false Whether the radio button is checked
disabled Boolean false Whether the radio button is disabled

Content Component

The LooposUi::RadioCard::Content component provides structured layouts for radio card content with two different display modes.

Content Component Parameters

Parameter Type Default Description
kind Symbol :compact Layout type: :compact or :full
price String Optional Price text to display (compact layout only)

Content Component Slots

Slot Component Type Description
header LooposUi::Header Header content (title, description, etc.)
money_input Any Money input field (full layout only)
text_area LooposUi::Inputs::TextArea Text area for additional input (full layout only)
label_tag LooposUi::StateLabel Label/tag component (compact layout only)