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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<div class="space-y-4">
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Default Radio Button Group</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">
        Post Status
      </label>
      <div class="flex flex-row gap-2">
        <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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-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">
        Select the current status of the post
      </span>
    </section>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Different Colors</h3>
    <div class="space-y-2">
      <section role="radio" class="flex flex-col gap-1">
        <label id="" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
          Terms in default
        </label>
        <div class="flex flex-row gap-2">
          <div class="flex items-center">
            <input type="radio" name="default_terms" id="default_terms_default_terms" class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600">
            <label for="default_terms_default_terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
              Terms in default
            </label>      </div>
        </div>
      </section>
      <section role="radio" class="flex flex-col gap-1">
        <label id="" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
          Terms in red
        </label>
        <div class="flex flex-row gap-2">
          <div class="flex items-center">
            <input type="radio" name="red_terms" id="red_terms_red_terms" class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-red-600 focus:ring-red-500 dark:focus:ring-red-600 border-red-600">
            <label for="red_terms_red_terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
              Terms in red
            </label>      </div>
        </div>
      </section>
      <section role="radio" class="flex flex-col gap-1">
        <label id="" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
          Terms in green
        </label>
        <div class="flex flex-row gap-2">
          <div class="flex items-center">
            <input type="radio" name="green_terms" id="green_terms_green_terms" class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-600 border-green-600">
            <label for="green_terms_green_terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
              Terms in green
            </label>      </div>
        </div>
      </section>
      <section role="radio" class="flex flex-col gap-1">
        <label id="" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
          Terms in blue
        </label>
        <div class="flex flex-row gap-2">
          <div class="flex items-center">
            <input type="radio" name="blue_terms" id="blue_terms_blue_terms" class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600 border-blue-600">
            <label for="blue_terms_blue_terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
              Terms in blue
            </label>      </div>
        </div>
      </section>
    </div>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Horizontal Layout</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">
        Post Status
      </label>
      <div class="flex flex-row gap-2">
        <div class="flex items-center">
          <input type="radio" name="status_horizontal" id="status_horizontal_status_horizontal_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600">
          <label for="status_horizontal_status_horizontal_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_horizontal" id="status_horizontal_status_horizontal_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600">
          <label for="status_horizontal_status_horizontal_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_horizontal" id="status_horizontal_status_horizontal_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600">
          <label for="status_horizontal_status_horizontal_archived" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Archived
          </label>        </div>
      </div>
    </section>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Vertical Layout</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">
        Post Status
      </label>
      <div class="flex flex-col gap-1">
        <div class="flex items-center">
          <input type="radio" name="status_vertical" id="status_vertical_status_vertical_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600">
          <label for="status_vertical_status_vertical_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_vertical" id="status_vertical_status_vertical_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600">
          <label for="status_vertical_status_vertical_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_vertical" id="status_vertical_status_vertical_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600">
          <label for="status_vertical_status_vertical_archived" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Archived
          </label>        </div>
      </div>
    </section>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Disabled State</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">
        Disabled Radio Buttons
      </label>
      <div class="flex flex-row gap-2">
        <div class="flex items-center">
          <input type="radio" name="status_disabled" id="status_disabled_status_disabled_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600 cursor-not-allowed opacity-50" disabled="disabled">
          <label for="status_disabled_status_disabled_draft" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300 ms-2 text-sm opacity-50 text-gray-400 cursor-not-allowed">
            Draft
          </label>        </div>
        <div class="flex items-center">
          <input type="radio" name="status_disabled" id="status_disabled_status_disabled_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600 cursor-not-allowed opacity-50" disabled="disabled">
          <label for="status_disabled_status_disabled_published" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300 ms-2 text-sm opacity-50 text-gray-400 cursor-not-allowed">
            Published
          </label>        </div>
        <div class="flex items-center">
          <input type="radio" name="status_disabled" id="status_disabled_status_disabled_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-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600 cursor-not-allowed opacity-50" disabled="disabled">
          <label for="status_disabled_status_disabled_archived" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300 ms-2 text-sm opacity-50 text-gray-400 cursor-not-allowed">
            Archived
          </label>        </div>
      </div>
    </section>
  </div>
</div>
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
<div class="space-y-4">
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Default Radio Button Group</h3>
    <%= rui_radio_button(method: :status, collection: statuses, label: "Post Status", help_text: "Select the current status of the post") %>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Different Colors</h3>
    <div class="space-y-2">
      <%# [:default, :primary, :secondary, :info, :success, :warning, :danger].each do |color| %>
      <%#= rui_radio_button(method: "status_#{color}", collection: statuses, label: "#{color.to_s.capitalize} Radio Buttons", color: color) %>
      <%# end %>
      <%= rui_radio_button(object: :Post, method: :default_terms, label: "Terms in default") %>
      <%= rui_radio_button(object: :Post, method: :red_terms, label: "Terms in red", color: :red) %>
      <%= rui_radio_button(object: :Post, method: :green_terms, label: "Terms in green", color: :green) %>
      <%= rui_radio_button(object: :Post, method: :blue_terms, label: "Terms in blue", color: :blue) %>
    </div>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Horizontal Layout</h3>
    <%= rui_radio_button(method: :status_horizontal, collection: statuses, label: "Post Status", layout: :horizontal) %>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Vertical Layout</h3>
    <%= rui_radio_button(method: :status_vertical, collection: statuses, label: "Post Status", layout: :vertical) %>
  </div>
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Disabled State</h3>
    <%= rui_radio_button(method: :status_disabled, collection: statuses, label: "Disabled Radio Buttons", disabled: true) %>
  </div>
</div>

🔘 Radio Button Component Overview

This preview showcases various types of radio buttons:

🔵 Different colors 🔒 Disabled state 📝 With labels and help text 🔀 Horizontal and vertical layouts

Each radio button group demonstrates:

  • Different styles and colors
  • Various customization options
  • Integration with form builders

How to use in a form: <%= f.rui_radio_button(method: :status, collection: Post.statuses, label: "Post Status") %>

How to use outside of a form: <%= rui_radio_button(method: :status, collection: Post.statuses, label: "Post Status") %>

For customization options, check out the 'Playground' section below! 🎛️

No params configured.