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
<fieldset class="space-y-4">
  <legend class="text-sm font-medium text-text-v2-primary mb-4">Radio Button Group</legend>
  <div class="flex flex-col space-y-4">
    <div class="lui-basic_radio_button">
      <label for="radio_group-option1-option-1" class="lui-basic_radio_button__option">
        <input type="radio" id="radio_group-option1-option-1" name="radio_group" value="option1">
        <span class="text-copy-14-400 text-text-v2-primary">Option 1</span>
      </label></div>
    <div class="lui-basic_radio_button">
      <label for="radio_group-option2-option-2" class="lui-basic_radio_button__option">
        <input type="radio" id="radio_group-option2-option-2" name="radio_group" value="option2" checked="checked">
        <span class="text-copy-14-400 text-text-v2-primary">Option 2</span>
      </label></div>
    <div class="lui-basic_radio_button">
      <label for="radio_group-option3-option-3" class="lui-basic_radio_button__option">
        <input type="radio" id="radio_group-option3-option-3" name="radio_group" value="option3" disabled="disabled">
        <span class="text-copy-14-400 text-text-v2-primary">Option 3</span>
      </label></div>
  </div>
</fieldset>

BasicRadioButton

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
<% description = preview_params[:hasDescription] ? "Description" : nil %>
<fieldset class="space-y-4">
  <legend class="text-sm font-medium text-text-v2-primary mb-4">Radio Button Group</legend>
  
  <div class="flex flex-col space-y-4">
    <%= render LooposUi::BasicRadioButton.new(value: "option1", name: "radio_group", text: "Option 1", description: description) %>
    <%= render LooposUi::BasicRadioButton.new(value: "option2", name: "radio_group", text: "Option 2", description: description, checked: true) %>
    <%= render LooposUi::BasicRadioButton.new(value: "option3", name: "radio_group", text: "Option 3", description: description, disabled: true) %>
  </div>
</fieldset>

No notes provided.

Param Description Input

Has description

BasicRadioButton

A simple radio button component for form inputs with optional description text.

Usage

<%= render LooposUi::BasicRadioButton.new(
  value: "option1",
  name: "radio_group",
  text: "Option 1",
  description: "Optional description text"
) %>

Parameters

Parameter Type Required Default Description
value String Yes - The value of the radio button
name String Yes - The name attribute for grouping radio buttons
text String Yes - The display text for the radio button
checked Boolean No false Whether the radio button is checked
disabled Boolean No false Whether the radio button is disabled
description String No nil Optional description text below the radio button

Examples

Basic Usage

<fieldset class="space-y-4">
  <legend class="text-sm font-medium text-text-v2-primary mb-4">Choose an option</legend>
  <div class="flex flex-col space-y-4">
    <%= render LooposUi::BasicRadioButton.new(
      value: "option1",
      name: "radio_group",
      text: "Option 1"
    ) %>
    <%= render LooposUi::BasicRadioButton.new(
      value: "option2",
      name: "radio_group",
      text: "Option 2",
      checked: true
    ) %>
    <%= render LooposUi::BasicRadioButton.new(
      value: "option3",
      name: "radio_group",
      text: "Option 3",
      disabled: true
    ) %>
  </div>
</fieldset>

With Descriptions

<fieldset class="space-y-4">
  <legend class="text-sm font-medium text-text-v2-primary mb-4">Payment Method</legend>
  <div class="flex flex-col space-y-4">
    <%= render LooposUi::BasicRadioButton.new(
      value: "card",
      name: "payment",
      text: "Credit Card",
      description: "Pay with your credit or debit card"
    ) %>
    <%= render LooposUi::BasicRadioButton.new(
      value: "paypal",
      name: "payment",
      text: "PayPal",
      description: "Pay securely with PayPal"
    ) %>
    <%= render LooposUi::BasicRadioButton.new(
      value: "bank",
      name: "payment",
      text: "Bank Transfer",
      description: "Direct bank transfer (may take 1-3 business days)",
      disabled: true
    ) %>
  </div>
</fieldset>