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
Related components
| 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) |