LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

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
<form>
Default
<label for="test-1" class="lui-radio_card">
  <input type="radio" id="test-1" name="test" value="1" class="lui-radio_card__input">
  <div class="flex-1 ml-8">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
  </div>
</label>  Checked
<label for="test-1" class="lui-radio_card">
  <input type="radio" id="test-1" name="test" value="1" class="lui-radio_card__input">
  <div class="flex-1 ml-8">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
  </div>
</label>  Disabled
<label for="test-1" class="lui-radio_card">
  <input type="radio" id="test-1" name="test" value="1" disabled="disabled" class="lui-radio_card__input">
  <div class="flex-1 ml-8">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
  </div>
</label></form>

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
<form>
  Default
  <%= render LooposUi::RadioCard.new(value: "1", name: "test", checked: false, disabled: false) do %>
    <%= render LooposUi::DummySlot.new %>
  <% end %>
  Checked
  <%= render LooposUi::RadioCard.new(value: "1", name: "test", checked: false, disabled: false) do %>
    <%= render LooposUi::DummySlot.new %>
  <% end %>
  Disabled
  <%= render LooposUi::RadioCard.new(value: "1", name: "test", checked: false, disabled: true) do %>
    <%= render LooposUi::DummySlot.new %>
  <% end %>
</form>

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)