RapidRails UI Book
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
<div class="space-y-4">
  <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Single Radio Button</h3>
  <section role="radio group" class="flex flex-col gap-1">
    <label id="" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
      Select post status
    </label>
    <div class="flex flex-col gap-1">
      <div class="flex items-center">
        <input type="radio" name="status" id="status_status_draft" value="draft" class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 border-primary-600">
        <label for="status_status_draft" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Draft
        </label>        </div>
      <div class="flex items-center">
        <input type="radio" name="status" id="status_status_published" value="published" class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 border-primary-600">
        <label for="status_status_published" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Published
        </label>        </div>
      <div class="flex items-center">
        <input type="radio" name="status" id="status_status_archived" value="archived" class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 border-primary-600">
        <label for="status_status_archived" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Archived
        </label>        </div>
    </div>
    <span id="" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
      Choose the current status of the post
    </span>
  </section>
</div>
<div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
  <h3 class="mb-2 text-lg font-semibold">Current Configuration:</h3>
  <ul class="list-disc list-inside">
    <li>Label: Select post status</li>
    <li>Help Text: Choose the current status of the post</li>
    <li>Color: primary</li>
    <li>Disabled: false</li>
    <li>Layout: vertical</li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="space-y-4">
  <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Single Radio Button</h3>
  <%= rui_radio_button(method: :status, collection: statuses, label: label, help_text: help_text, color: color, disabled: disabled, layout: layout) %>
</div>
<div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
  <h3 class="mb-2 text-lg font-semibold">Current Configuration:</h3>
  <ul class="list-disc list-inside">
    <li>Label: <%= label %></li>
    <li>Help Text: <%= help_text %></li>
    <li>Color: <%= color %></li>
    <li>Disabled: <%= disabled %></li>
    <li>Layout: <%= layout %></li>
  </ul>
</div>

🎉 Radio Button Component Playground! 🎉

Welcome to the Radio Button Component Playground! Here you can experiment with different configurations to see how your radio buttons will look and behave.

Param Description Input

Radio button group label

Help text for the radio button group

—

Disable the radio buttons

—