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
<div class="space-y-4">
  <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Single Checkbox</h3>
  <!-- app/components/rapidrailsui/checkbox/component.html.erb -->
  <div role="checkbox" class="">
    <label id="" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
      I agree to the terms and conditions
    </label>
    <div class="flex items-center mb-2">
      <input type="checkbox"
               id="terms"
               name="terms"
               value="1"
               class="w-4 h-4 bg-gray-100 border-gray-300 rounded 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"
               aria-labelledby="terms_label"
               
               >
      <label id="terms_label" for="terms" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
        I agree to the terms and conditions
      </label>
    </div>
    <span id="" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
      Please read the terms before agreeing
    </span></div>
  <h3 class="mt-6 text-lg font-semibold">Checkbox Group</h3>
  <!-- app/components/rapidrailsui/checkbox/component.html.erb -->
  <div role="checkbox group" class="">
    <label id="" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">
      One Person Agency
    </label>
    <div class="flex flex-col gap-1">
      <input type="hidden" name="[technologies][]" value="" autocomplete="off">
      <div class="flex items-center mb-2">
        <input type="checkbox"
               id="technologies_technologies_Ruby"
               name="[technologies][]"
               value="Ruby"
               class="w-4 h-4 bg-gray-100 border-gray-300 rounded 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 item-checkbox"
               data-rapidrailsui--select-all-target="item"
               data-action="change->rapidrailsui--select-all#itemToggled"
        aria-labelledby="technologies_technologies_Ruby_label"
        >
        <label id="technologies_technologies_Ruby_label" for="technologies_technologies_Ruby" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Ruby
        </label>
      </div>
      <div class="flex items-center mb-2">
        <input type="checkbox"
               id="technologies_technologies_Rails"
               name="[technologies][]"
               value="Rails"
               class="w-4 h-4 bg-gray-100 border-gray-300 rounded 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 item-checkbox"
               data-rapidrailsui--select-all-target="item"
               data-action="change->rapidrailsui--select-all#itemToggled"
        aria-labelledby="technologies_technologies_Rails_label"
        >
        <label id="technologies_technologies_Rails_label" for="technologies_technologies_Rails" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Rails
        </label>
      </div>
      <div class="flex items-center mb-2">
        <input type="checkbox"
               id="technologies_technologies_Stimulus JS"
               name="[technologies][]"
               value="Stimulus JS"
               class="w-4 h-4 bg-gray-100 border-gray-300 rounded 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 item-checkbox"
               data-rapidrailsui--select-all-target="item"
               data-action="change->rapidrailsui--select-all#itemToggled"
        aria-labelledby="technologies_technologies_Stimulus JS_label"
        >
        <label id="technologies_technologies_Stimulus JS_label" for="technologies_technologies_Stimulus JS" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Stimulus Js
        </label>
      </div>
      <div class="flex items-center mb-2">
        <input type="checkbox"
               id="technologies_technologies_Turbo"
               name="[technologies][]"
               value="Turbo"
               class="w-4 h-4 bg-gray-100 border-gray-300 rounded 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 item-checkbox"
               data-rapidrailsui--select-all-target="item"
               data-action="change->rapidrailsui--select-all#itemToggled"
        aria-labelledby="technologies_technologies_Turbo_label"
        >
        <label id="technologies_technologies_Turbo_label" for="technologies_technologies_Turbo" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Turbo
        </label>
      </div>
      <div class="flex items-center mb-2">
        <input type="checkbox"
               id="technologies_technologies_LLM"
               name="[technologies][]"
               value="LLM"
               class="w-4 h-4 bg-gray-100 border-gray-300 rounded 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 item-checkbox"
               data-rapidrailsui--select-all-target="item"
               data-action="change->rapidrailsui--select-all#itemToggled"
        aria-labelledby="technologies_technologies_LLM_label"
        >
        <label id="technologies_technologies_LLM_label" for="technologies_technologies_LLM" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
          Llm
        </label>
      </div>
    </div>
    <span id="" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
      Which technologies do you use?
    </span></div>
</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: I agree to the terms and conditions</li>
    <li>Help Text: Please read the terms before agreeing</li>
    <li>Color: primary</li>
    <li>Disabled: false</li>
    <li>Select All: false</li>
    <li>Layout: vertical</li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="space-y-4">
  <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Single Checkbox</h3>
  <%= rui_checkbox(method: :terms, label: label || "Checkbox Label", help_text: help_text, color: color, disabled: disabled) %>
  <h3 class="mt-6 text-lg font-semibold">Checkbox Group</h3>
  <%= rui_checkbox(method: :technologies, collection: technologies, label: "One Person Agency", help_text: "Which technologies do you use?", color: color, disabled: disabled, select_all: select_all, 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 || "Checkbox Label" %></li>
    <li>Help Text: <%= help_text %></li>
    <li>Color: <%= color %></li>
    <li>Disabled: <%= disabled %></li>
    <li>Select All: <%= select_all %></li>
    <li>Layout: <%= layout %></li>
  </ul>
</div>

🎉 Checkbox Component Playground! 🎉

Welcome to the Checkbox Component Playground! Here you can experiment with different configurations to see how your checkboxes will look and behave.

Param Description Input

Checkbox label

Help text for the checkbox

—

Disable the checkbox

Enable select all option (for collections)

—