rails_bootstrap_form 0.7.2 → 0.8.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +5 -0
- data/Gemfile.lock +1 -1
- data/README.md +1745 -7
- data/demo/app/controllers/users_controller.rb +7 -0
- data/demo/app/models/user.rb +3 -0
- data/demo/app/views/users/_form.html.erb +10 -2
- data/demo/app/views/users/_horizontal_form.html.erb +4 -5
- data/demo/app/views/users/_inline_form.html.erb +13 -0
- data/demo/app/views/users/_vertical_form.html.erb +4 -5
- data/demo/config/locales/en.rb +9 -1
- data/demo/db/migrate/20230528041919_add_columns_in_users.rb +11 -0
- data/demo/db/schema.rb +8 -1
- data/lib/rails_bootstrap_form/bootstrap_form_builder.rb +10 -1
- data/lib/rails_bootstrap_form/bootstrap_form_options.rb +40 -37
- data/lib/rails_bootstrap_form/field_wrapper_builder.rb +8 -4
- data/lib/rails_bootstrap_form/helpers/buttons.rb +7 -1
- data/lib/rails_bootstrap_form/helpers/check_box.rb +3 -1
- data/lib/rails_bootstrap_form/helpers/labels.rb +18 -9
- data/lib/rails_bootstrap_form/helpers/radio_button.rb +3 -1
- data/lib/rails_bootstrap_form/inputs/base.rb +1 -1
- data/lib/rails_bootstrap_form/inputs/check_box.rb +2 -0
- data/lib/rails_bootstrap_form/inputs/collection_check_boxes.rb +1 -1
- data/lib/rails_bootstrap_form/inputs/collection_radio_buttons.rb +1 -1
- data/lib/rails_bootstrap_form/inputs/radio_button.rb +2 -0
- data/lib/rails_bootstrap_form/version.rb +1 -1
- metadata +4 -2
data/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# RailsBootstrapForm
|
|
2
2
|
|
|
3
|
-
**rails_bootstrap_form** is a Rails form builder that makes it super easy to integrate
|
|
4
|
-
|
|
3
|
+
**rails_bootstrap_form** is a Rails form builder that makes it super easy to integrate [Bootstrap 5](https://getbootstrap.com/) forms into your Rails application.
|
|
4
|
+
`rails_bootstrap_forms`'s form helpers generate the form field and its label along with all the Bootstrap mark-up required for proper Bootstrap display.
|
|
5
5
|
|
|
6
6
|
## Minimum Requirements
|
|
7
7
|
|
|
@@ -11,18 +11,21 @@
|
|
|
11
11
|
|
|
12
12
|
## Installation
|
|
13
13
|
|
|
14
|
-
Install Bootstrap 5. There are many ways to do this, depending on the asset pipeline you're using in your Rails application.
|
|
14
|
+
Install Bootstrap 5. There are many ways to do this, depending on the asset pipeline you're using in your Rails application.
|
|
15
|
+
One way is to use the gem that works with Sprockets. To do so, in a brand new Rails 7.0 application created _without_ the
|
|
16
|
+
`--webpacker` option, add the `bootstrap` gem to your `Gemfile`:
|
|
15
17
|
|
|
16
18
|
```ruby
|
|
17
19
|
gem "bootstrap", "~> 5.0"
|
|
18
20
|
```
|
|
19
21
|
|
|
20
|
-
And follow the remaining instructions in the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails)
|
|
22
|
+
And follow the remaining instructions in the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails)
|
|
23
|
+
for setting up `application.scss` and `application.js`.
|
|
21
24
|
|
|
22
25
|
Add the `rails_bootstrap_form` gem to your `Gemfile`:
|
|
23
26
|
|
|
24
27
|
```ruby
|
|
25
|
-
gem "rails_bootstrap_form", "~> 0.
|
|
28
|
+
gem "rails_bootstrap_form", "~> 0.8.1"
|
|
26
29
|
```
|
|
27
30
|
|
|
28
31
|
Then:
|
|
@@ -36,7 +39,8 @@ If you use Rails in the default mode without any pre-processor, you'll have to a
|
|
|
36
39
|
*= require rails_bootstrap_form
|
|
37
40
|
```
|
|
38
41
|
|
|
39
|
-
If you followed the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails),
|
|
42
|
+
If you followed the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails),
|
|
43
|
+
you'll probably have switched to SCSS. In this case add the following line to your `application.scss`:
|
|
40
44
|
|
|
41
45
|
```scss
|
|
42
46
|
@import "rails_bootstrap_form";
|
|
@@ -45,7 +49,7 @@ If you followed the [official bootstrap installation guide](https://github.com/t
|
|
|
45
49
|
## Configuration
|
|
46
50
|
|
|
47
51
|
`rails_bootstrap_form` can be used without any configuration. However, `rails_bootstrap_form` does have an optional configuration file at `config/initializers/rails_bootstrap_form.rb` for setting options that affect all generated forms in an application. This configuration file is created using the generator
|
|
48
|
-
by running the command
|
|
52
|
+
by running the command:
|
|
49
53
|
|
|
50
54
|
```
|
|
51
55
|
$ rails generate rails_bootstrap_form:install
|
|
@@ -66,3 +70,1737 @@ The current configuration options are:
|
|
|
66
70
|
| Option | Default value | Description |
|
|
67
71
|
|---------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
68
72
|
| `default_form_attributes` | | Set this option to `{role: "form"}` to make forms non-compliant with W3C, but generate the `role="form"` attribute. |
|
|
73
|
+
|
|
74
|
+
## Usage
|
|
75
|
+
|
|
76
|
+
### bootstrap_form_for
|
|
77
|
+
|
|
78
|
+
To get started, use the `bootstrap_form_for` helper in place of the Rails [`form_for`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_for) helper. Here's an example:
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
```erb
|
|
83
|
+
<%= bootstrap_form_for(@user) do |f| %>
|
|
84
|
+
<%= f.email_field :email %>
|
|
85
|
+
<%= f.password_field :password %>
|
|
86
|
+
<%= f.check_box :remember_me %>
|
|
87
|
+
<%= f.primary "Log In" %>
|
|
88
|
+
<% end %>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
This generates the following HTML:
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
95
|
+
<div class="mb-3">
|
|
96
|
+
<label class="form-label required" for="user_email">Email address</label>
|
|
97
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
|
98
|
+
</div>
|
|
99
|
+
<div class="mb-3">
|
|
100
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
101
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
102
|
+
</div>
|
|
103
|
+
<div class="form-check mb-3">
|
|
104
|
+
<input name="user[remember_me]" type="hidden" value="0" autocomplete="off">
|
|
105
|
+
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
|
|
106
|
+
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
107
|
+
</div>
|
|
108
|
+
<input type="submit" name="commit" value="Log In" class="btn btn-primary" data-disable-with="Log In">
|
|
109
|
+
</form>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### bootstrap_form_with
|
|
113
|
+
|
|
114
|
+
To get started, use the `bootstrap_form_with` helper in place of the Rails [`form_with`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with) helper. Here's an example:
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
```erb
|
|
119
|
+
<%= bootstrap_form_with(model: @user) do |f| %>
|
|
120
|
+
<%= f.email_field :email %>
|
|
121
|
+
<%= f.password_field :password %>
|
|
122
|
+
<%= f.check_box :remember_me %>
|
|
123
|
+
<%= f.primary "Log In" %>
|
|
124
|
+
<% end %>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
This generates the following HTML:
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
131
|
+
<div class="mb-3">
|
|
132
|
+
<label class="form-label required" for="user_email">Email address</label>
|
|
133
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
|
134
|
+
</div>
|
|
135
|
+
<div class="mb-3">
|
|
136
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
137
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
138
|
+
</div>
|
|
139
|
+
<div class="form-check mb-3">
|
|
140
|
+
<input name="user[remember_me]" type="hidden" value="0" autocomplete="off">
|
|
141
|
+
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
|
|
142
|
+
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
143
|
+
</div>
|
|
144
|
+
<input type="submit" name="commit" value="Log In" class="btn btn-primary" data-disable-with="Log In">
|
|
145
|
+
</form>
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Bootstrap Configuration Options
|
|
149
|
+
|
|
150
|
+
Here's a list of all possible options you can pass via `bootstrap_form` option that can be attached to the `bootstrap_form_for` or `bootstrap_form_with` or any field helpers inside of it:
|
|
151
|
+
|
|
152
|
+
| Option | Description | Default value |
|
|
153
|
+
| ------ | ------------- | ----------- |
|
|
154
|
+
| `layout` | Controls layout of form and field helpers. It can be `vertical` `horizontal`, or `inline`. | `vertical` |
|
|
155
|
+
| `field_class` | A CSS class that will be applied to all form fields. | `form-control` |
|
|
156
|
+
| `additional_field_class` | An additional CSS class that will be added along with the existing css classes of field helpers. | `nil` |
|
|
157
|
+
| `help_text` | Describes help text for the HTML field. Help text is automatically read from translation file. If you want to customize it, you can pass a string. You can also set it `false` if you do not want help text displayed. | `nil` |
|
|
158
|
+
| `label_text` | An option to customize automatically generated label text. | `nil` |
|
|
159
|
+
| `skip_label` | An option to control whether the label is to be displayed or not. | `false` |
|
|
160
|
+
| `hide_label` | An option to control whether the label is only accessible to a screen readers. | `false` |
|
|
161
|
+
| `hide_class` | A CSS class that will be used when the label is only accessible to a screen readers. | `visually-hidden` |
|
|
162
|
+
| `label_class` | A CSS class that will be applied to all labels when layout is `vertical`. | `form-label` |
|
|
163
|
+
| `additional_label_class` | An additional CSS class that will be added along with the existing label css classes. | `nil` |
|
|
164
|
+
| `prepend` | Raw or HTML content to be prepended to the field. | `nil` |
|
|
165
|
+
| `append` | Raw or HTML content to be appended to the field. | `nil` |
|
|
166
|
+
| `additional_input_group_class` | An additional CSS class that will be added to existing input group wrapper css classes. | `nil` |
|
|
167
|
+
| `floating` | An option to control whether the field should have a floating label. | `false` |
|
|
168
|
+
| `static_field_class` | A CSS class that will be applied to all static fields. | `form-control-plaintext` |
|
|
169
|
+
| `switch` | An option to control whether the check box should look like Bootstrap switches. | `false` |
|
|
170
|
+
| `wrapper_options` | An option to control the HTML attributes and options that will be added to a field wrapper. | `{}` |
|
|
171
|
+
| `size` | An option to control the size of input groups, buttons, labels, and fields. It can be `sm` or `lg`. | `nil` |
|
|
172
|
+
| `inline` | An option to group checkboxes and radio buttons on the same horizontal row. | `false` |
|
|
173
|
+
| `label_col_class` | A CSS class that will be applied to all labels when layout is `horizontal`. | `col-form-label` |
|
|
174
|
+
| `label_col_wrapper_class` | A CSS class for label column when layout is `horizontal`. | `col-sm-2` |
|
|
175
|
+
| `field_col_wrapper_class` | A CSS class for field column when layout is `horizontal`. | `col-sm-10` |
|
|
176
|
+
| `render_as_button` | An option to render submit button using `<button type="submit">` instead of `<input type="submit">`. | `false` |
|
|
177
|
+
|
|
178
|
+
Options applied on the form level will apply to all field helpers. Options applied on field helpers will override form-level options.
|
|
179
|
+
Here's an example of a form where one field uses different layout:
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
```erb
|
|
184
|
+
<%= bootstrap_form_for @user do |form| %>
|
|
185
|
+
<%= form.text_field :name %>
|
|
186
|
+
<%= form.email_field :email %>
|
|
187
|
+
<%= form.password_field :password, bootstrap_form: {layout: :horizontal} %>
|
|
188
|
+
<%= form.check_box :terms, required: true %>
|
|
189
|
+
<%= form.primary "Register" %>
|
|
190
|
+
<% end %>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
This generates the following HTML:
|
|
194
|
+
|
|
195
|
+
```html
|
|
196
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
197
|
+
<div class="mb-3">
|
|
198
|
+
<label class="form-label required" for="user_name">Name</label>
|
|
199
|
+
<input class="form-control" aria-required="true" required="required" type="text" name="user[name]" id="user_name">
|
|
200
|
+
</div>
|
|
201
|
+
<div class="mb-3">
|
|
202
|
+
<label class="form-label required" for="user_email">Email address</label>
|
|
203
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
|
204
|
+
</div>
|
|
205
|
+
<div class="row mb-3">
|
|
206
|
+
<label class="col-form-label col-sm-2 required" for="user_password">Password</label>
|
|
207
|
+
<div class="col-sm-10">
|
|
208
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="form-check mb-3">
|
|
212
|
+
<input name="user[terms]" type="hidden" value="0" autocomplete="off">
|
|
213
|
+
<input required="required" class="form-check-input" type="checkbox" value="1" name="user[terms]" id="user_terms">
|
|
214
|
+
<label class="form-check-label required" for="user_terms">I accept terms and conditions</label>
|
|
215
|
+
<div class="form-text text-muted">You must first accept terms and conditions in order to continue</div>
|
|
216
|
+
</div>
|
|
217
|
+
<input type="submit" name="commit" value="Register" class="btn btn-primary" data-disable-with="Register">
|
|
218
|
+
</form>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
## Supported Form Helpers
|
|
222
|
+
|
|
223
|
+
This gem wraps most of the form field helpers. Here's the current list:
|
|
224
|
+
|
|
225
|
+
```
|
|
226
|
+
check_box collection_check_boxes collection_radio_buttons
|
|
227
|
+
collection_select color_field date_field
|
|
228
|
+
date_select datetime_field datetime_local_field
|
|
229
|
+
datetime_select email_field file_field
|
|
230
|
+
grouped_collection_select hidden_field month_field
|
|
231
|
+
number_field password_field phone_field
|
|
232
|
+
radio_button range_field rich_text_area
|
|
233
|
+
search_field select static_field
|
|
234
|
+
telephone_field text_area text_field
|
|
235
|
+
time_field time_select time_zone_select
|
|
236
|
+
url_field week_field weekday_select
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
## Supported form layouts
|
|
240
|
+
|
|
241
|
+
### Vertical Layout
|
|
242
|
+
|
|
243
|
+
This layout is default layout for the form in which labels are above the fields and labels and fields take 100% of the width.
|
|
244
|
+
|
|
245
|
+
Here's an example of how it looks like:
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
```erb
|
|
250
|
+
<%= bootstrap_form_for @user do |form| %>
|
|
251
|
+
<%= form.email_field :email %>
|
|
252
|
+
<%= form.password_field :password %>
|
|
253
|
+
<%= form.primary "Sign in" %>
|
|
254
|
+
<% end %>
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
This generates the following HTML:
|
|
258
|
+
|
|
259
|
+
```html
|
|
260
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
261
|
+
<div class="mb-3">
|
|
262
|
+
<label class="form-label required" for="user_email">Email address</label>
|
|
263
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
|
264
|
+
</div>
|
|
265
|
+
<div class="mb-3">
|
|
266
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
267
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
268
|
+
</div>
|
|
269
|
+
<input type="submit" name="commit" value="Sign in" class="btn btn-primary" data-disable-with="Sign in">
|
|
270
|
+
</form>
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
### Horizontal Layout
|
|
274
|
+
|
|
275
|
+
If you want to align label and field side by side, you can use horizontal layout for the form.
|
|
276
|
+
You can optionally override `label_col_wrapper_class` and `field_col_wrapper_class` (they default to `col-sm-2` and `col-sm-10`) at either form level
|
|
277
|
+
or field helpers if want to customize space between label and field.
|
|
278
|
+
|
|
279
|
+
Here's an example of how it looks like by default:
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
```erb
|
|
284
|
+
<%= bootstrap_form_for @user, bootstrap_form: {layout: :horizontal} do |form| %>
|
|
285
|
+
<%= form.email_field :email %>
|
|
286
|
+
<%= form.password_field :password %>
|
|
287
|
+
<%= form.primary "Sign in" %>
|
|
288
|
+
<% end %>
|
|
289
|
+
```
|
|
290
|
+
This generates the following HTML:
|
|
291
|
+
|
|
292
|
+
```html
|
|
293
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
294
|
+
<div class="row mb-3">
|
|
295
|
+
<label class="col-form-label col-sm-2 required" for="user_email">Email address</label>
|
|
296
|
+
<div class="col-sm-10">
|
|
297
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="row mb-3">
|
|
301
|
+
<label class="col-form-label col-sm-2 required" for="user_password">Password</label>
|
|
302
|
+
<div class="col-sm-10">
|
|
303
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
<input type="submit" name="commit" value="Sign in" class="btn btn-primary" data-disable-with="Sign in">
|
|
307
|
+
</form>
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
The `label_col_wrapper_class` and `field_col_wrapper_class` css classes can also be changed per control:
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
```erb
|
|
315
|
+
<%= bootstrap_form_for @user, bootstrap_form: {layout: :horizontal} do |form| %>
|
|
316
|
+
<%= form.text_field :name %>
|
|
317
|
+
<%= form.email_field :username, bootstrap_form: {label_col_wrapper_class: "col-sm-2", field_col_wrapper_class: "col-sm-6"} %>
|
|
318
|
+
<%= form.password_field :password %>
|
|
319
|
+
<%= form.fields_for :address, include_id: false do |address_form| %>
|
|
320
|
+
<%= address_form.select :country_id, options_for_select(::Country.pluck(:name, :id), address_form.object.country_id),
|
|
321
|
+
{include_blank: "Select Country"} %>
|
|
322
|
+
<% end %>
|
|
323
|
+
<%= form.primary "Register" %>
|
|
324
|
+
<% end %>
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
This generates the following HTML:
|
|
328
|
+
|
|
329
|
+
```html
|
|
330
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
331
|
+
<div class="row mb-3">
|
|
332
|
+
<label class="col-form-label col-sm-2 required" for="user_name">Name</label>
|
|
333
|
+
<div class="col-sm-10">
|
|
334
|
+
<input class="form-control" aria-required="true" required="required" type="text" name="user[name]" id="user_name">
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
<div class="row mb-3">
|
|
338
|
+
<label class="col-form-label col-sm-2" for="user_username">Username</label>
|
|
339
|
+
<div class="col-sm-6">
|
|
340
|
+
<input class="form-control" type="email" name="user[username]" id="user_username">
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="row mb-3">
|
|
344
|
+
<label class="col-form-label col-sm-2 required" for="user_password">Password</label>
|
|
345
|
+
<div class="col-sm-10">
|
|
346
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
<div class="row mb-3">
|
|
350
|
+
<label class="col-form-label col-sm-2 required" for="user_address_attributes_country_id">Country</label>
|
|
351
|
+
<div class="col-sm-10">
|
|
352
|
+
<select class="form-select" aria-required="true" required="required" name="user[address_attributes][country_id]" id="user_address_attributes_country_id">
|
|
353
|
+
<option value="">Select Country</option>
|
|
354
|
+
<option value="1">India</option>
|
|
355
|
+
<option value="2">Ireland</option>
|
|
356
|
+
<option value="3">United States</option>
|
|
357
|
+
<option value="4">United Kingdom</option>
|
|
358
|
+
</select>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
<input type="submit" name="commit" value="Register" class="btn btn-primary" data-disable-with="Register">
|
|
362
|
+
</form>
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
### Inline Layout
|
|
366
|
+
|
|
367
|
+
You may choose to render form elements in one line. Please note that this layout won't render all form elements perfectly. Things like errors messages and help text won't show up right.
|
|
368
|
+
|
|
369
|
+
Here's an example of how it looks like:
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
```erb
|
|
374
|
+
<%= bootstrap_form_for @user, bootstrap_form: {layout: :inline} do |form| %>
|
|
375
|
+
<%= form.email_field :email %>
|
|
376
|
+
<%= form.password_field :password %>
|
|
377
|
+
<%= form.primary "Sign in" %>
|
|
378
|
+
<% end %>
|
|
379
|
+
```
|
|
380
|
+
|
|
381
|
+
This generates the following HTML:
|
|
382
|
+
|
|
383
|
+
```html
|
|
384
|
+
<form role="form" novalidate="novalidate" class="new_user row row-cols-lg-auto g-3 align-items-center" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
385
|
+
<div class="col-12">
|
|
386
|
+
<label class="form-label visually-hidden required" for="user_email">Email address</label>
|
|
387
|
+
<input class="form-control" aria-required="true" required="required" placeholder="Email address" type="email" name="user[email]" id="user_email">
|
|
388
|
+
</div>
|
|
389
|
+
<div class="col-12">
|
|
390
|
+
<label class="form-label visually-hidden required" for="user_password">Password</label>
|
|
391
|
+
<input class="form-control" aria-required="true" required="required" placeholder="Password" type="password" name="user[password]" id="user_password">
|
|
392
|
+
</div>
|
|
393
|
+
<div class="col-12">
|
|
394
|
+
<input type="submit" name="commit" value="Sign in" class="btn btn-primary" data-disable-with="Sign in">
|
|
395
|
+
</div>
|
|
396
|
+
</form>
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
## Components
|
|
400
|
+
|
|
401
|
+
`rails_bootstrap_form` internally supports below components which act as helpers to build fields and their wrappers.
|
|
402
|
+
|
|
403
|
+
### Labels
|
|
404
|
+
|
|
405
|
+
By default, Rails takes label text from locale file. You can use `label_text` option to change label text
|
|
406
|
+
generated by the Rails.
|
|
407
|
+
|
|
408
|
+
|
|
409
|
+
|
|
410
|
+
```erb
|
|
411
|
+
<%= form.password_field :password, bootstrap_form: {label_text: "New password"} %>
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
This generates the following HTML:
|
|
415
|
+
|
|
416
|
+
```html
|
|
417
|
+
<div class="mb-3">
|
|
418
|
+
<label class="form-label required" for="user_password">New password</label>
|
|
419
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
420
|
+
</div>
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
To hide a label, you can set `hide_label` option to `true`. This adds the `visually-hidden` class, which keeps your labels accessible
|
|
424
|
+
to those using screen readers.
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
```erb
|
|
429
|
+
<%= form.password_field :password, bootstrap_form: {hide_label: true} %>
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
This generates the following HTML:
|
|
433
|
+
|
|
434
|
+
```html
|
|
435
|
+
<div class="mb-3">
|
|
436
|
+
<label class="form-label visually-hidden required" for="user_password">Password</label>
|
|
437
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
438
|
+
</div>
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
To skip a label, you can set `skip_label` option to `true`. This will not render label in a field wrapper.
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
|
|
445
|
+
```erb
|
|
446
|
+
<%= form.password_field :password, bootstrap_form: {skip_label: true} %>
|
|
447
|
+
```
|
|
448
|
+
|
|
449
|
+
This generates the following HTML:
|
|
450
|
+
|
|
451
|
+
```html
|
|
452
|
+
<div class="mb-3">
|
|
453
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
454
|
+
</div>
|
|
455
|
+
```
|
|
456
|
+
|
|
457
|
+
To add additional CSS class to the label, you can use `additional_label_class` option.
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
```erb
|
|
462
|
+
<%= form.password_field :password, bootstrap_form: {additional_label_class: "text-danger"} %>
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
This generates the following HTML:
|
|
466
|
+
|
|
467
|
+
```html
|
|
468
|
+
<div class="mb-3">
|
|
469
|
+
<label class="form-label text-danger required" for="user_password">Password</label>
|
|
470
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
471
|
+
</div>
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
### Help Text
|
|
475
|
+
|
|
476
|
+
The help text is useful when you want to provide helpful information about a field. By default, `rails_bootstrap_form` takes help text from locale file.
|
|
477
|
+
If you want to show information regarding any field, you need to add it in locale file of your application. You can also use HTML content for help text.
|
|
478
|
+
|
|
479
|
+
```yml
|
|
480
|
+
en:
|
|
481
|
+
activerecord:
|
|
482
|
+
help_texts:
|
|
483
|
+
user:
|
|
484
|
+
password: "A strong password should be at least twelve characters long with combination of uppercase letters, lowercase letters, numbers, and symbols"
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
|
|
488
|
+
|
|
489
|
+
```erb
|
|
490
|
+
<%= form.password_field :password %>
|
|
491
|
+
```
|
|
492
|
+
|
|
493
|
+
This generates the following HTML:
|
|
494
|
+
|
|
495
|
+
```html
|
|
496
|
+
<div class="mb-3">
|
|
497
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
498
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
499
|
+
<div class="form-text text-muted">A strong password should be at least twelve characters long with combination of uppercase letters, lowercase letters, numbers, and symbols</div>
|
|
500
|
+
</div>
|
|
501
|
+
```
|
|
502
|
+
|
|
503
|
+
You can customize the help text using `help_text` option:
|
|
504
|
+
|
|
505
|
+
|
|
506
|
+
|
|
507
|
+
```erb
|
|
508
|
+
<%= form.password_field :password, bootstrap_form: {help_text: "Password should not be disclosed to anyone."} %>
|
|
509
|
+
```
|
|
510
|
+
|
|
511
|
+
This generates the following HTML:
|
|
512
|
+
|
|
513
|
+
```html
|
|
514
|
+
<div class="mb-3">
|
|
515
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
516
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
517
|
+
<div class="form-text text-muted">Password should not be disclosed to anyone.</div>
|
|
518
|
+
</div>
|
|
519
|
+
```
|
|
520
|
+
|
|
521
|
+
You can also disable help text by setting `help_text` option to `false`:
|
|
522
|
+
|
|
523
|
+
|
|
524
|
+
|
|
525
|
+
```erb
|
|
526
|
+
<%= form.password_field :password, help_text: false %>
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
This generates the following HTML:
|
|
530
|
+
|
|
531
|
+
```html
|
|
532
|
+
<div class="mb-3">
|
|
533
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
534
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
535
|
+
</div>
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
### Input Groups
|
|
539
|
+
|
|
540
|
+
Input groups allow prepending and appending arbitrary html or text to the field.
|
|
541
|
+
|
|
542
|
+
You can use `prepend` and/or `append` options to attach addons to input fields:
|
|
543
|
+
|
|
544
|
+
|
|
545
|
+
|
|
546
|
+
```erb
|
|
547
|
+
<%= form.number_field :expected_ctc, bootstrap_form: {prepend: "₹", append: ".00"} %>
|
|
548
|
+
```
|
|
549
|
+
|
|
550
|
+
This generates the following HTML:
|
|
551
|
+
|
|
552
|
+
```html
|
|
553
|
+
<div class="mb-3">
|
|
554
|
+
<label class="form-label" for="user_expected_ctc">Expected CTC</label>
|
|
555
|
+
<div class="input-group">
|
|
556
|
+
<span class="input-group-text">₹</span>
|
|
557
|
+
<input class="form-control" type="number" name="user[expected_ctc]" id="user_expected_ctc">
|
|
558
|
+
<span class="input-group-text">.00</span>
|
|
559
|
+
</div>
|
|
560
|
+
</div>
|
|
561
|
+
```
|
|
562
|
+
|
|
563
|
+
If you want to attach multiple addons to the input, pass them as an array:
|
|
564
|
+
|
|
565
|
+
|
|
566
|
+
|
|
567
|
+
```erb
|
|
568
|
+
<%= form.number_field :expected_ctc, bootstrap_form: {prepend: ["Gross", "₹"], append: [".00", "per annum"]} %>
|
|
569
|
+
```
|
|
570
|
+
|
|
571
|
+
This generates the following HTML:
|
|
572
|
+
|
|
573
|
+
```html
|
|
574
|
+
<div class="mb-3">
|
|
575
|
+
<label class="form-label" for="user_expected_ctc">Expected CTC</label>
|
|
576
|
+
<div class="input-group">
|
|
577
|
+
<span class="input-group-text">Gross</span>
|
|
578
|
+
<span class="input-group-text">₹</span>
|
|
579
|
+
<input class="form-control" type="number" name="user[expected_ctc]" id="user_expected_ctc">
|
|
580
|
+
<span class="input-group-text">.00</span>
|
|
581
|
+
<span class="input-group-text">per annum</span>
|
|
582
|
+
</div>
|
|
583
|
+
</div>
|
|
584
|
+
```
|
|
585
|
+
|
|
586
|
+
You can also prepend and append buttons. Note that these buttons must contain the `btn` class to generate the correct markup.
|
|
587
|
+
|
|
588
|
+
|
|
589
|
+
|
|
590
|
+
```erb
|
|
591
|
+
<%= form.text_field :search, bootstrap_form: {append: form.secondary("Search")} %>
|
|
592
|
+
```
|
|
593
|
+
|
|
594
|
+
This generates the following HTML:
|
|
595
|
+
|
|
596
|
+
```html
|
|
597
|
+
<div class="mb-3">
|
|
598
|
+
<label class="form-label" for="user_search">Search</label>
|
|
599
|
+
<div class="input-group">
|
|
600
|
+
<input class="form-control" type="text" name="user[search]" id="user_search">
|
|
601
|
+
<input type="submit" name="commit" value="Search" class="btn btn-secondary" data-disable-with="Search">
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
```
|
|
605
|
+
|
|
606
|
+
To add additional CSS class to the input group wrapper, you can use `additional_input_group_class` option.
|
|
607
|
+
|
|
608
|
+
|
|
609
|
+
|
|
610
|
+
```erb
|
|
611
|
+
<%= form.number_field :expected_ctc, bootstrap_form: {prepend: "₹", append: ".00", additional_input_group_class: "custom-class"} %>
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
This generates the following HTML:
|
|
615
|
+
|
|
616
|
+
```html
|
|
617
|
+
<div class="mb-3">
|
|
618
|
+
<label class="form-label" for="user_expected_ctc">Expected CTC</label>
|
|
619
|
+
<div class="input-group custom-class">
|
|
620
|
+
<span class="input-group-text">₹</span>
|
|
621
|
+
<input class="form-control" type="number" name="user[expected_ctc]" id="user_expected_ctc">
|
|
622
|
+
<span class="input-group-text">.00</span>
|
|
623
|
+
</div>
|
|
624
|
+
</div>
|
|
625
|
+
```
|
|
626
|
+
|
|
627
|
+
You can customize size of the input group using `size` option. Input group supports `sm` and `lg` values.
|
|
628
|
+
|
|
629
|
+
|
|
630
|
+
|
|
631
|
+
```erb
|
|
632
|
+
<%= form.number_field :expected_ctc, bootstrap_form: {prepend: "₹", append: ".00", size: :sm} %>
|
|
633
|
+
```
|
|
634
|
+
|
|
635
|
+
This generates the following HTML:
|
|
636
|
+
|
|
637
|
+
```html
|
|
638
|
+
<div class="mb-3">
|
|
639
|
+
<label class="form-label" for="user_expected_ctc">Expected CTC</label>
|
|
640
|
+
<div class="input-group input-group-sm">
|
|
641
|
+
<span class="input-group-text">₹</span>
|
|
642
|
+
<input class="form-control form-control-sm" type="number" name="user[expected_ctc]" id="user_expected_ctc">
|
|
643
|
+
<span class="input-group-text">.00</span>
|
|
644
|
+
</div>
|
|
645
|
+
</div>
|
|
646
|
+
```
|
|
647
|
+
|
|
648
|
+
## Form Helpers
|
|
649
|
+
|
|
650
|
+
Our form helpers accept the same arguments as the default Rails form helpers.
|
|
651
|
+
In order to apply addition options of `rails_bootstrap_form`, `bootstrap_form` object is passed in `options` argument of the helper.
|
|
652
|
+
Here's an example of how you pass the arguments for each form helper:
|
|
653
|
+
|
|
654
|
+
### check_box
|
|
655
|
+
|
|
656
|
+
Our `check_box` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box).
|
|
657
|
+
This helper will render check box and label for you.
|
|
658
|
+
|
|
659
|
+
|
|
660
|
+
|
|
661
|
+
```erb
|
|
662
|
+
<%= form.check_box :remember_me %>
|
|
663
|
+
```
|
|
664
|
+
|
|
665
|
+
This generates the following HTML:
|
|
666
|
+
|
|
667
|
+
```html
|
|
668
|
+
<div class="form-check mb-3">
|
|
669
|
+
<input name="user[remember_me]" type="hidden" value="0" autocomplete="off">
|
|
670
|
+
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
|
|
671
|
+
<label class="form-check-label" for="user_remember_me">Keep me signed in</label>
|
|
672
|
+
</div>
|
|
673
|
+
```
|
|
674
|
+
|
|
675
|
+
You can set `switch` option to `true` if you want check box to look like switches.
|
|
676
|
+
|
|
677
|
+
|
|
678
|
+
|
|
679
|
+
```erb
|
|
680
|
+
<%= form.check_box :remember_me, bootstrap_form: {switch: true} %>
|
|
681
|
+
```
|
|
682
|
+
|
|
683
|
+
This generates the following HTML:
|
|
684
|
+
|
|
685
|
+
```html
|
|
686
|
+
<div class="form-check form-switch mb-3">
|
|
687
|
+
<input name="user[remember_me]" type="hidden" value="0" autocomplete="off">
|
|
688
|
+
<input class="form-check-input" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
|
|
689
|
+
<label class="form-check-label" for="user_remember_me">Keep me signed in</label>
|
|
690
|
+
</div>
|
|
691
|
+
```
|
|
692
|
+
|
|
693
|
+
This helper also renders help text if `help_text` option is set or information of the field is added to the locale file:
|
|
694
|
+
|
|
695
|
+
|
|
696
|
+
|
|
697
|
+
```erb
|
|
698
|
+
<%= form.check_box :terms, required: true %>
|
|
699
|
+
```
|
|
700
|
+
|
|
701
|
+
This generates the following HTML:
|
|
702
|
+
|
|
703
|
+
```html
|
|
704
|
+
<div class="form-check mb-3">
|
|
705
|
+
<input name="user[terms]" type="hidden" value="0" autocomplete="off">
|
|
706
|
+
<input required="required" class="form-check-input" type="checkbox" value="1" name="user[terms]" id="user_terms">
|
|
707
|
+
<label class="form-check-label required" for="user_terms">I accept terms and conditions</label>
|
|
708
|
+
<div class="form-text text-muted">You must first accept terms and conditions in order to continue</div>
|
|
709
|
+
</div>
|
|
710
|
+
```
|
|
711
|
+
|
|
712
|
+
### color_field
|
|
713
|
+
|
|
714
|
+
Our `color_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-color_field).
|
|
715
|
+
|
|
716
|
+
|
|
717
|
+
|
|
718
|
+
```erb
|
|
719
|
+
<%= form.color_field :favorite_color %>
|
|
720
|
+
```
|
|
721
|
+
|
|
722
|
+
This generates the following HTML:
|
|
723
|
+
|
|
724
|
+
```html
|
|
725
|
+
<div class="mb-3">
|
|
726
|
+
<label class="form-label required" for="user_favorite_color">Favorite color</label>
|
|
727
|
+
<input class="form-control form-control-color" aria-required="true" required="required" value="#000000" type="color" name="user[favorite_color]" id="user_favorite_color">
|
|
728
|
+
</div>
|
|
729
|
+
```
|
|
730
|
+
|
|
731
|
+
### date_field
|
|
732
|
+
|
|
733
|
+
Our `date_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-date_field).
|
|
734
|
+
|
|
735
|
+
|
|
736
|
+
|
|
737
|
+
```erb
|
|
738
|
+
<%= form.date_field :interview_date %>
|
|
739
|
+
```
|
|
740
|
+
|
|
741
|
+
This generates the following HTML:
|
|
742
|
+
|
|
743
|
+
```html
|
|
744
|
+
<div class="mb-3">
|
|
745
|
+
<label class="form-label" for="user_interview_date">Interview date</label>
|
|
746
|
+
<input class="form-control" value="2023-05-08" type="date" name="user[interview_date]" id="user_interview_date">
|
|
747
|
+
</div>
|
|
748
|
+
```
|
|
749
|
+
|
|
750
|
+
### datetime_field
|
|
751
|
+
|
|
752
|
+
Our `datetime_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-datetime_field).
|
|
753
|
+
|
|
754
|
+
|
|
755
|
+
|
|
756
|
+
```erb
|
|
757
|
+
<%= form.datetime_field :interview_datetime %>
|
|
758
|
+
```
|
|
759
|
+
|
|
760
|
+
This generates the following HTML:
|
|
761
|
+
|
|
762
|
+
```html
|
|
763
|
+
<div class="mb-3">
|
|
764
|
+
<label class="form-label" for="user_interview_datetime">Interview date & time</label>
|
|
765
|
+
<input class="form-control" type="datetime-local" name="user[interview_datetime]" id="user_interview_datetime">
|
|
766
|
+
</div>
|
|
767
|
+
```
|
|
768
|
+
|
|
769
|
+
### datetime_local_field
|
|
770
|
+
|
|
771
|
+
Our `datetime_local_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-datetime_local_field).
|
|
772
|
+
|
|
773
|
+
|
|
774
|
+
|
|
775
|
+
```erb
|
|
776
|
+
<%= form.datetime_local_field :interview_datetime %>
|
|
777
|
+
```
|
|
778
|
+
|
|
779
|
+
This generates the following HTML:
|
|
780
|
+
|
|
781
|
+
```html
|
|
782
|
+
<div class="mb-3">
|
|
783
|
+
<label class="form-label" for="user_interview_datetime">Interview date & time</label>
|
|
784
|
+
<input class="form-control" type="datetime-local" name="user[interview_datetime]" id="user_interview_datetime">
|
|
785
|
+
</div>
|
|
786
|
+
```
|
|
787
|
+
|
|
788
|
+
### email_field
|
|
789
|
+
|
|
790
|
+
Our `email_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-email_field).
|
|
791
|
+
|
|
792
|
+
|
|
793
|
+
|
|
794
|
+
```erb
|
|
795
|
+
<%= form.email_field :email %>
|
|
796
|
+
```
|
|
797
|
+
|
|
798
|
+
This generates the following HTML:
|
|
799
|
+
|
|
800
|
+
```html
|
|
801
|
+
<div class="mb-3">
|
|
802
|
+
<label class="form-label required" for="user_email">Email address</label>
|
|
803
|
+
<input class="form-control" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
|
804
|
+
</div>
|
|
805
|
+
```
|
|
806
|
+
|
|
807
|
+
### file_field
|
|
808
|
+
|
|
809
|
+
Our `file_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-file_field).
|
|
810
|
+
|
|
811
|
+
|
|
812
|
+
|
|
813
|
+
```erb
|
|
814
|
+
<%= form.file_field :avatar %>
|
|
815
|
+
```
|
|
816
|
+
|
|
817
|
+
This generates the following HTML:
|
|
818
|
+
|
|
819
|
+
```html
|
|
820
|
+
<div class="mb-3">
|
|
821
|
+
<label class="form-label" for="user_avatar">Avatar</label>
|
|
822
|
+
<input class="form-control" type="file" name="user[avatar]" id="user_avatar">
|
|
823
|
+
</div>
|
|
824
|
+
```
|
|
825
|
+
|
|
826
|
+
### hidden_field
|
|
827
|
+
|
|
828
|
+
The `hidden_field` helper in `rails_bootstrap_form` calls the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-hidden_field) directly, and does no additional mark-up.
|
|
829
|
+
|
|
830
|
+
### month_field
|
|
831
|
+
|
|
832
|
+
Our `month_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-month_field).
|
|
833
|
+
|
|
834
|
+
|
|
835
|
+
|
|
836
|
+
```erb
|
|
837
|
+
<%= form.month_field :birth_month %>
|
|
838
|
+
```
|
|
839
|
+
|
|
840
|
+
This generates the following HTML:
|
|
841
|
+
|
|
842
|
+
```html
|
|
843
|
+
<div class="mb-3">
|
|
844
|
+
<label class="form-label" for="user_birth_month">Birth month</label>
|
|
845
|
+
<input class="form-control" type="month" name="user[birth_month]" id="user_birth_month">
|
|
846
|
+
</div>
|
|
847
|
+
```
|
|
848
|
+
|
|
849
|
+
### number_field
|
|
850
|
+
|
|
851
|
+
Our `number_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-number_field).
|
|
852
|
+
|
|
853
|
+
|
|
854
|
+
|
|
855
|
+
```erb
|
|
856
|
+
<%= form.number_field :expected_ctc %>
|
|
857
|
+
```
|
|
858
|
+
|
|
859
|
+
This generates the following HTML:
|
|
860
|
+
|
|
861
|
+
```html
|
|
862
|
+
<div class="mb-3">
|
|
863
|
+
<label class="form-label" for="user_expected_ctc">Expected CTC</label>
|
|
864
|
+
<input class="form-control" type="number" name="user[expected_ctc]" id="user_expected_ctc">
|
|
865
|
+
</div>
|
|
866
|
+
```
|
|
867
|
+
|
|
868
|
+
### password_field
|
|
869
|
+
|
|
870
|
+
Our `password_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-password_field).
|
|
871
|
+
|
|
872
|
+
|
|
873
|
+
|
|
874
|
+
```erb
|
|
875
|
+
<%= form.password_field :password %>
|
|
876
|
+
```
|
|
877
|
+
|
|
878
|
+
This generates the following HTML:
|
|
879
|
+
|
|
880
|
+
```html
|
|
881
|
+
<div class="mb-3">
|
|
882
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
883
|
+
<input class="form-control" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
884
|
+
</div>
|
|
885
|
+
```
|
|
886
|
+
|
|
887
|
+
### phone_field
|
|
888
|
+
|
|
889
|
+
Our `phone_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-phone_field).
|
|
890
|
+
|
|
891
|
+
|
|
892
|
+
|
|
893
|
+
```erb
|
|
894
|
+
<%= form.phone_field :mobile_number %>
|
|
895
|
+
```
|
|
896
|
+
|
|
897
|
+
This generates the following HTML:
|
|
898
|
+
|
|
899
|
+
```html
|
|
900
|
+
<div class="mb-3">
|
|
901
|
+
<label class="form-label required" for="user_mobile_number">Mobile number</label>
|
|
902
|
+
<input class="form-control" aria-required="true" required="required" type="tel" name="user[mobile_number]" id="user_mobile_number">
|
|
903
|
+
</div>
|
|
904
|
+
```
|
|
905
|
+
|
|
906
|
+
### radio_button
|
|
907
|
+
|
|
908
|
+
Our `radio_button` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-radio_button).
|
|
909
|
+
This helper will render check box and label for you.
|
|
910
|
+
|
|
911
|
+
|
|
912
|
+
|
|
913
|
+
```erb
|
|
914
|
+
<%= form.radio_button :gender, :male, bootstrap_form: {label_text: "Male"} %>
|
|
915
|
+
```
|
|
916
|
+
|
|
917
|
+
This generates the following HTML:
|
|
918
|
+
|
|
919
|
+
```html
|
|
920
|
+
<div class="form-check mb-3">
|
|
921
|
+
<input class="form-check-input" type="radio" value="male" name="user[gender]" id="user_gender_male">
|
|
922
|
+
<label class="form-check-label" for="user_gender_male">Male</label>
|
|
923
|
+
</div>
|
|
924
|
+
```
|
|
925
|
+
|
|
926
|
+
This helper also renders help text if `help_text` option is set or information of the field is added to the locale file:
|
|
927
|
+
|
|
928
|
+
|
|
929
|
+
|
|
930
|
+
```erb
|
|
931
|
+
<%= form.radio_button :gender, :male, bootstrap_form: {label_text: "Male", help_text: "Please select your gender"} %>
|
|
932
|
+
```
|
|
933
|
+
|
|
934
|
+
This generates the following HTML:
|
|
935
|
+
|
|
936
|
+
```html
|
|
937
|
+
<div class="form-check mb-3">
|
|
938
|
+
<input class="form-check-input" type="radio" value="male" name="user[gender]" id="user_gender_male">
|
|
939
|
+
<label class="form-check-label" for="user_gender_male">Male</label>
|
|
940
|
+
<div class="form-text text-muted">Please select your gender</div>
|
|
941
|
+
</div>
|
|
942
|
+
```
|
|
943
|
+
|
|
944
|
+
### range_field
|
|
945
|
+
|
|
946
|
+
Our `range_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-range_field).
|
|
947
|
+
|
|
948
|
+
|
|
949
|
+
|
|
950
|
+
```erb
|
|
951
|
+
<%= form.range_field :excellence %>
|
|
952
|
+
```
|
|
953
|
+
|
|
954
|
+
This generates the following HTML:
|
|
955
|
+
|
|
956
|
+
```html
|
|
957
|
+
<div class="mb-3">
|
|
958
|
+
<label class="form-label" for="user_excellence">Excellence</label>
|
|
959
|
+
<input class="form-range" type="range" name="user[excellence]" id="user_excellence">
|
|
960
|
+
</div>
|
|
961
|
+
```
|
|
962
|
+
|
|
963
|
+
### search_field
|
|
964
|
+
|
|
965
|
+
Our `search_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-search_field).
|
|
966
|
+
|
|
967
|
+
|
|
968
|
+
|
|
969
|
+
```erb
|
|
970
|
+
<%= form.search_field :search %>
|
|
971
|
+
```
|
|
972
|
+
|
|
973
|
+
This generates the following HTML:
|
|
974
|
+
|
|
975
|
+
```html
|
|
976
|
+
<div class="mb-3">
|
|
977
|
+
<label class="form-label" for="user_search">Search</label>
|
|
978
|
+
<input class="form-control" type="search" name="user[search]" id="user_search">
|
|
979
|
+
</div>
|
|
980
|
+
```
|
|
981
|
+
|
|
982
|
+
### telephone_field
|
|
983
|
+
|
|
984
|
+
Our `telephone_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-telephone_field).
|
|
985
|
+
|
|
986
|
+
|
|
987
|
+
|
|
988
|
+
```erb
|
|
989
|
+
<%= form.telephone_field :mobile_number %>
|
|
990
|
+
```
|
|
991
|
+
|
|
992
|
+
This generates the following HTML:
|
|
993
|
+
|
|
994
|
+
```html
|
|
995
|
+
<div class="mb-3">
|
|
996
|
+
<label class="form-label required" for="user_mobile_number">Mobile number</label>
|
|
997
|
+
<input class="form-control" aria-required="true" required="required" type="tel" name="user[mobile_number]" id="user_mobile_number">
|
|
998
|
+
</div>
|
|
999
|
+
```
|
|
1000
|
+
|
|
1001
|
+
### text_field
|
|
1002
|
+
|
|
1003
|
+
Our `text_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-text_field).
|
|
1004
|
+
|
|
1005
|
+
|
|
1006
|
+
|
|
1007
|
+
```erb
|
|
1008
|
+
<%= form.text_field :name %>
|
|
1009
|
+
```
|
|
1010
|
+
|
|
1011
|
+
This generates the following HTML:
|
|
1012
|
+
|
|
1013
|
+
```html
|
|
1014
|
+
<div class="mb-3">
|
|
1015
|
+
<label class="form-label required" for="user_name">Name</label>
|
|
1016
|
+
<input class="form-control" aria-required="true" required="required" type="text" name="user[name]" id="user_name">
|
|
1017
|
+
</div>
|
|
1018
|
+
```
|
|
1019
|
+
|
|
1020
|
+
### text_area
|
|
1021
|
+
|
|
1022
|
+
Our `text_area` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-text_area).
|
|
1023
|
+
|
|
1024
|
+
|
|
1025
|
+
|
|
1026
|
+
```erb
|
|
1027
|
+
<%= form.text_area :street %>
|
|
1028
|
+
```
|
|
1029
|
+
|
|
1030
|
+
This generates the following HTML:
|
|
1031
|
+
|
|
1032
|
+
```html
|
|
1033
|
+
<div class="mb-3">
|
|
1034
|
+
<label class="form-label required" for="user_street">Street</label>
|
|
1035
|
+
<textarea class="form-control" aria-required="true" required="required" name="user[street]" id="user_street"></textarea>
|
|
1036
|
+
</div>
|
|
1037
|
+
```
|
|
1038
|
+
|
|
1039
|
+
### time_field
|
|
1040
|
+
|
|
1041
|
+
Our `time_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-time_field).
|
|
1042
|
+
|
|
1043
|
+
|
|
1044
|
+
|
|
1045
|
+
```erb
|
|
1046
|
+
<%= form.time_field :interview_time %>
|
|
1047
|
+
```
|
|
1048
|
+
|
|
1049
|
+
This generates the following HTML:
|
|
1050
|
+
|
|
1051
|
+
```html
|
|
1052
|
+
<div class="mb-3">
|
|
1053
|
+
<label class="form-label" for="user_interview_time">Interview time</label>
|
|
1054
|
+
<input class="form-control" type="time" name="user[interview_time]" id="user_interview_time">
|
|
1055
|
+
</div>
|
|
1056
|
+
```
|
|
1057
|
+
|
|
1058
|
+
### url_field
|
|
1059
|
+
|
|
1060
|
+
Our `url_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-url_field).
|
|
1061
|
+
|
|
1062
|
+
|
|
1063
|
+
|
|
1064
|
+
```erb
|
|
1065
|
+
<%= form.url_field :blog_url %>
|
|
1066
|
+
```
|
|
1067
|
+
|
|
1068
|
+
This generates the following HTML:
|
|
1069
|
+
|
|
1070
|
+
```html
|
|
1071
|
+
<div class="mb-3">
|
|
1072
|
+
<label class="form-label" for="user_blog_url">Blog URL</label>
|
|
1073
|
+
<input class="form-control" type="url" name="user[blog_url]" id="user_blog_url">
|
|
1074
|
+
</div>
|
|
1075
|
+
```
|
|
1076
|
+
|
|
1077
|
+
### week_field
|
|
1078
|
+
|
|
1079
|
+
Our `week_field` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-week_field).
|
|
1080
|
+
|
|
1081
|
+
|
|
1082
|
+
|
|
1083
|
+
```erb
|
|
1084
|
+
<%= form.week_field :winter_holiday_week %>
|
|
1085
|
+
```
|
|
1086
|
+
|
|
1087
|
+
This generates the following HTML:
|
|
1088
|
+
|
|
1089
|
+
```html
|
|
1090
|
+
<div class="mb-3">
|
|
1091
|
+
<label class="form-label" for="user_winter_holiday_week">Winter holiday week</label>
|
|
1092
|
+
<input class="form-control" type="week" name="user[winter_holiday_week]" id="user_winter_holiday_week">
|
|
1093
|
+
</div>
|
|
1094
|
+
```
|
|
1095
|
+
|
|
1096
|
+
## Form Options Helpers
|
|
1097
|
+
|
|
1098
|
+
Our form options helpers accept the same arguments as the default Rails form options helpers.
|
|
1099
|
+
In order to apply addition options of `rails_bootstrap_form`, `bootstrap_form` object is passed in `options` argument of the helper.
|
|
1100
|
+
Here's an example of how you pass the arguments for each form option helper:
|
|
1101
|
+
|
|
1102
|
+
### select
|
|
1103
|
+
|
|
1104
|
+
Our `select` helper accepts the same arguments as the [default Rails helper](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select).
|
|
1105
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1106
|
+
|
|
1107
|
+
|
|
1108
|
+
|
|
1109
|
+
```erb
|
|
1110
|
+
<%= form.select :fruit_id, options_for_select(::Fruit.pluck(:name, :id), form.object.fruit_id), {include_blank: "Select fruit", bootstrap_form: {size: :sm, help_text: false}}, {onchange: "this.form.submit();"} %>
|
|
1111
|
+
```
|
|
1112
|
+
|
|
1113
|
+
This generates the following HTML:
|
|
1114
|
+
|
|
1115
|
+
```html
|
|
1116
|
+
<div class="mb-3">
|
|
1117
|
+
<label class="form-label required" for="user_fruit_id">Favorite fruit</label>
|
|
1118
|
+
<select onchange="this.form.submit();" class="form-select" aria-required="true" required="required" name="user[fruit_id]" id="user_fruit_id">
|
|
1119
|
+
<option value="">Select fruit</option>
|
|
1120
|
+
<option value="1">Mango</option>
|
|
1121
|
+
<option value="2">Apple</option>
|
|
1122
|
+
<option value="3">Orange</option>
|
|
1123
|
+
<option value="4">Watermelon</option>
|
|
1124
|
+
</select>
|
|
1125
|
+
</div>
|
|
1126
|
+
```
|
|
1127
|
+
|
|
1128
|
+
### collection_select
|
|
1129
|
+
|
|
1130
|
+
Our `collection_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select).
|
|
1131
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1132
|
+
|
|
1133
|
+
|
|
1134
|
+
|
|
1135
|
+
```erb
|
|
1136
|
+
<%= form.collection_select :fruit_id, ::Fruit.all, :id, :name, {include_blank: "Select fruit", bootstrap_form: {help_text: false}}, {selected: form.object.fruit_id, onchange: "this.form.submit();"} %>
|
|
1137
|
+
```
|
|
1138
|
+
|
|
1139
|
+
This generates the following HTML:
|
|
1140
|
+
|
|
1141
|
+
```html
|
|
1142
|
+
<div class="mb-3">
|
|
1143
|
+
<label class="form-label required" for="user_fruit_id">Favorite fruit</label>
|
|
1144
|
+
<select onchange="this.form.submit();" class="form-select" aria-required="true" required="required" name="user[fruit_id]" id="user_fruit_id">
|
|
1145
|
+
<option value="">Select fruit</option>
|
|
1146
|
+
<option value="1">Mango</option>
|
|
1147
|
+
<option value="2">Apple</option>
|
|
1148
|
+
<option value="3">Orange</option>
|
|
1149
|
+
<option value="4">Watermelon</option>
|
|
1150
|
+
</select>
|
|
1151
|
+
</div>
|
|
1152
|
+
```
|
|
1153
|
+
|
|
1154
|
+
### grouped_collection_select
|
|
1155
|
+
|
|
1156
|
+
Our `grouped_collection_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-grouped_collection_select).
|
|
1157
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1158
|
+
|
|
1159
|
+
|
|
1160
|
+
|
|
1161
|
+
```erb
|
|
1162
|
+
<%= form.grouped_collection_select :city, ::Country.includes(:cities), :cities, :name, :id, :name, {include_blank: "Select city", bootstrap_form: {floating: true}}, {onchange: "this.form.submit();"} %>
|
|
1163
|
+
```
|
|
1164
|
+
|
|
1165
|
+
This generates the following HTML:
|
|
1166
|
+
|
|
1167
|
+
```html
|
|
1168
|
+
<div class="mb-3">
|
|
1169
|
+
<div class="form-floating">
|
|
1170
|
+
<select onchange="this.form.submit();" class="form-select" aria-required="true" required="required" placeholder="City" name="user[city]" id="user_city">
|
|
1171
|
+
<option value="">Select city</option>
|
|
1172
|
+
<optgroup label="India">
|
|
1173
|
+
<option value="1">Mumbai</option>
|
|
1174
|
+
<option value="2">New Delhi</option>
|
|
1175
|
+
<option value="3">Kolkata</option>
|
|
1176
|
+
<option value="4">Chennai</option>
|
|
1177
|
+
</optgroup>
|
|
1178
|
+
<optgroup label="Ireland">
|
|
1179
|
+
<option value="5">Dublin</option>
|
|
1180
|
+
<option value="6">Galway</option>
|
|
1181
|
+
<option value="7">Cork</option>
|
|
1182
|
+
<option value="8">Belfast</option>
|
|
1183
|
+
</optgroup>
|
|
1184
|
+
<optgroup label="United States">
|
|
1185
|
+
<option value="9">New York</option>
|
|
1186
|
+
<option value="10">Los Angeles</option>
|
|
1187
|
+
<option value="11">San Francisco</option>
|
|
1188
|
+
<option value="12">Chicago</option>
|
|
1189
|
+
</optgroup>
|
|
1190
|
+
...
|
|
1191
|
+
...
|
|
1192
|
+
</select>
|
|
1193
|
+
<label class="form-label required" for="user_city">City</label>
|
|
1194
|
+
</div>
|
|
1195
|
+
</div>
|
|
1196
|
+
```
|
|
1197
|
+
|
|
1198
|
+
### time_zone_select
|
|
1199
|
+
|
|
1200
|
+
Our `time_zone_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-time_zone_select).
|
|
1201
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1202
|
+
|
|
1203
|
+
|
|
1204
|
+
|
|
1205
|
+
```erb
|
|
1206
|
+
<%= form.time_zone_select :timezone, ::ActiveSupport::TimeZone.all, {include_blank: "Select time zone", bootstrap_form: {label_text: "Preferred time zone"}}, {onchange: "this.form.submit();"} %>
|
|
1207
|
+
```
|
|
1208
|
+
|
|
1209
|
+
This generates the following HTML:
|
|
1210
|
+
|
|
1211
|
+
```html
|
|
1212
|
+
<div class="mb-3">
|
|
1213
|
+
<label class="form-label" for="user_timezone">Preferred time zone</label>
|
|
1214
|
+
<select onchange="this.form.submit();" class="form-select" name="user[timezone]" id="user_timezone">
|
|
1215
|
+
<option value="">Select time zone</option>
|
|
1216
|
+
<option value="International Date Line West">(GMT-12:00) International Date Line West</option>
|
|
1217
|
+
<option value="American Samoa">(GMT-11:00) American Samoa</option>
|
|
1218
|
+
<option value="Midway Island">(GMT-11:00) Midway Island</option>
|
|
1219
|
+
<option value="Hawaii">(GMT-10:00) Hawaii</option>
|
|
1220
|
+
<option value="Alaska">(GMT-09:00) Alaska</option>
|
|
1221
|
+
<option value="Pacific Time (US & Canada)">(GMT-08:00) Pacific Time (US & Canada)</option>
|
|
1222
|
+
<option value="Tijuana">(GMT-08:00) Tijuana</option>
|
|
1223
|
+
<option value="Arizona">(GMT-07:00) Arizona</option>
|
|
1224
|
+
...
|
|
1225
|
+
...
|
|
1226
|
+
</select>
|
|
1227
|
+
</div>
|
|
1228
|
+
```
|
|
1229
|
+
|
|
1230
|
+
### weekday_select
|
|
1231
|
+
|
|
1232
|
+
Our `weekday_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-weekday_select).
|
|
1233
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1234
|
+
|
|
1235
|
+
|
|
1236
|
+
|
|
1237
|
+
```erb
|
|
1238
|
+
<%= form.weekday_select :weekly_off, {selected: "Monday", bootstrap_form: {label_text: "Week off"}}, {onchange: "this.form.submit();} %>
|
|
1239
|
+
```
|
|
1240
|
+
|
|
1241
|
+
This generates the following HTML:
|
|
1242
|
+
|
|
1243
|
+
```html
|
|
1244
|
+
<div class="mb-3">
|
|
1245
|
+
<label class="form-label" for="user_weekly_off">Week off</label>
|
|
1246
|
+
<select onchange="this.form.submit();" class="form-select" name="user[weekly_off]" id="user_weekly_off">
|
|
1247
|
+
<option selected="selected" value="Monday">Monday</option>
|
|
1248
|
+
<option value="Tuesday">Tuesday</option>
|
|
1249
|
+
<option value="Wednesday">Wednesday</option>
|
|
1250
|
+
<option value="Thursday">Thursday</option>
|
|
1251
|
+
<option value="Friday">Friday</option>
|
|
1252
|
+
<option value="Saturday">Saturday</option>
|
|
1253
|
+
<option value="Sunday">Sunday</option>
|
|
1254
|
+
</select>
|
|
1255
|
+
</div>
|
|
1256
|
+
```
|
|
1257
|
+
|
|
1258
|
+
### collection_check_boxes
|
|
1259
|
+
|
|
1260
|
+
This helper provides a way to create collection of check boxes. This helper accepts same arguments as [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_check_boxes) except it don't accept a block as
|
|
1261
|
+
an argument and takes care of rendering labels, check boxes, and wrapper for you.
|
|
1262
|
+
|
|
1263
|
+
|
|
1264
|
+
|
|
1265
|
+
```erb
|
|
1266
|
+
<%= form.collection_check_boxes :skill_ids, ::Skill.all, :id, :name, {bootstrap_form: {layout: :horizontal}, onchange: "this.form.submit();"}, {} %>
|
|
1267
|
+
```
|
|
1268
|
+
|
|
1269
|
+
This generates the following HTML:
|
|
1270
|
+
|
|
1271
|
+
```html
|
|
1272
|
+
<div class="row mb-3">
|
|
1273
|
+
<label class="col-form-label col-sm-2 required" for="user_skill_ids">Skills</label>
|
|
1274
|
+
<div class="col-sm-10">
|
|
1275
|
+
<div class="rails-bootstrap-forms-collection-check-boxes">
|
|
1276
|
+
<input value="" multiple="multiple" autocomplete="off" type="hidden" name="user[skill_ids][]" id="user_skill_ids">
|
|
1277
|
+
<div class="form-check form-check-inline">
|
|
1278
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="1" name="user[skill_ids][]" id="user_skill_ids_1">
|
|
1279
|
+
<label class="form-check-label" for="user_skill_ids_1">Communication</label>
|
|
1280
|
+
</div>
|
|
1281
|
+
<div class="form-check form-check-inline">
|
|
1282
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="2" name="user[skill_ids][]" id="user_skill_ids_2">
|
|
1283
|
+
<label class="form-check-label" for="user_skill_ids_2">Problem Solving</label>
|
|
1284
|
+
</div>
|
|
1285
|
+
<div class="form-check form-check-inline">
|
|
1286
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="3" name="user[skill_ids][]" id="user_skill_ids_3">
|
|
1287
|
+
<label class="form-check-label" for="user_skill_ids_3">Leadership</label>
|
|
1288
|
+
</div>
|
|
1289
|
+
<div class="form-check form-check-inline">
|
|
1290
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="4" name="user[skill_ids][]" id="user_skill_ids_4">
|
|
1291
|
+
<label class="form-check-label" for="user_skill_ids_4">Writing</label>
|
|
1292
|
+
</div>
|
|
1293
|
+
<div class="form-check form-check-inline">
|
|
1294
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="5" name="user[skill_ids][]" id="user_skill_ids_5">
|
|
1295
|
+
<label class="form-check-label" for="user_skill_ids_5">Creativity</label>
|
|
1296
|
+
</div>
|
|
1297
|
+
<div class="form-check form-check-inline">
|
|
1298
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="6" name="user[skill_ids][]" id="user_skill_ids_6">
|
|
1299
|
+
<label class="form-check-label" for="user_skill_ids_6">Time Management</label>
|
|
1300
|
+
</div>
|
|
1301
|
+
<div class="form-check form-check-inline">
|
|
1302
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="7" name="user[skill_ids][]" id="user_skill_ids_7">
|
|
1303
|
+
<label class="form-check-label" for="user_skill_ids_7">Team Work</label>
|
|
1304
|
+
</div>
|
|
1305
|
+
<div class="form-check form-check-inline">
|
|
1306
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="8" name="user[skill_ids][]" id="user_skill_ids_8">
|
|
1307
|
+
<label class="form-check-label" for="user_skill_ids_8">Negotiation</label>
|
|
1308
|
+
</div>
|
|
1309
|
+
<div class="form-check form-check-inline">
|
|
1310
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="9" name="user[skill_ids][]" id="user_skill_ids_9">
|
|
1311
|
+
<label class="form-check-label" for="user_skill_ids_9">Decision Making</label>
|
|
1312
|
+
</div>
|
|
1313
|
+
<div class="form-check form-check-inline">
|
|
1314
|
+
<input onchange="this.form.submit();" class="form-check-input" type="checkbox" value="10" name="user[skill_ids][]" id="user_skill_ids_10">
|
|
1315
|
+
<label class="form-check-label" for="user_skill_ids_10">Management</label>
|
|
1316
|
+
</div>
|
|
1317
|
+
</div>
|
|
1318
|
+
<div class="form-text text-muted">Select your strong skills</div>
|
|
1319
|
+
</div>
|
|
1320
|
+
</div>
|
|
1321
|
+
```
|
|
1322
|
+
|
|
1323
|
+
### collection_radio_buttons
|
|
1324
|
+
|
|
1325
|
+
This helper provides a way to create collection of radio buttons. This helper accepts same arguments as [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_radio_buttons) except it don't accept a block as
|
|
1326
|
+
an argument and takes care of rendering labels, radio button, and wrapper for you.
|
|
1327
|
+
|
|
1328
|
+
|
|
1329
|
+
|
|
1330
|
+
```erb
|
|
1331
|
+
<%= form.collection_radio_buttons :fruit_id, ::Fruit.all, :id, :name, {checked: form.object.fruit_id, bootstrap_form: {layout: :horizontal}}, {} %>
|
|
1332
|
+
```
|
|
1333
|
+
|
|
1334
|
+
This generates the following HTML:
|
|
1335
|
+
|
|
1336
|
+
```html
|
|
1337
|
+
<div class="row mb-3">
|
|
1338
|
+
<label class="col-form-label col-sm-2 required" for="user_fruit_id">Favorite fruit</label>
|
|
1339
|
+
<div class="col-sm-10">
|
|
1340
|
+
<div class="rails-bootstrap-forms-collection-radio-buttons">
|
|
1341
|
+
<div class="form-check form-check-inline">
|
|
1342
|
+
<input class="form-check-input" type="radio" value="1" name="user[fruit_id]" id="user_fruit_id_1">
|
|
1343
|
+
<label class="form-check-label" for="user_fruit_id_1">Mango</label>
|
|
1344
|
+
</div>
|
|
1345
|
+
<div class="form-check form-check-inline">
|
|
1346
|
+
<input class="form-check-input" type="radio" value="2" name="user[fruit_id]" id="user_fruit_id_2">
|
|
1347
|
+
<label class="form-check-label" for="user_fruit_id_2">Apple</label>
|
|
1348
|
+
</div>
|
|
1349
|
+
<div class="form-check form-check-inline">
|
|
1350
|
+
<input class="form-check-input" type="radio" value="3" name="user[fruit_id]" id="user_fruit_id_3">
|
|
1351
|
+
<label class="form-check-label" for="user_fruit_id_3">Orange</label>
|
|
1352
|
+
</div>
|
|
1353
|
+
<div class="form-check form-check-inline">
|
|
1354
|
+
<input class="form-check-input" type="radio" value="4" name="user[fruit_id]" id="user_fruit_id_4">
|
|
1355
|
+
<label class="form-check-label" for="user_fruit_id_4">Watermelon</label>
|
|
1356
|
+
</div>
|
|
1357
|
+
</div>
|
|
1358
|
+
<div class="form-text text-muted">Select your favorite fruit</div>
|
|
1359
|
+
</div>
|
|
1360
|
+
</div>
|
|
1361
|
+
```
|
|
1362
|
+
|
|
1363
|
+
## Date Helpers
|
|
1364
|
+
|
|
1365
|
+
The multiple selects that the date and time helpers (`date_select`, `time_select`, `datetime_select`) generate are wrapped inside a `fieldset.rails-bootstrap-forms-[date|time|datetime]-select` tag.
|
|
1366
|
+
This is because Bootstrap automatically styles our controls as blocks. This wrapper fixes this defining these selects as `inline-block` and a width of `auto`.
|
|
1367
|
+
In order to apply addition options of `rails_bootstrap_form`, `bootstrap_form` object is passed in `options` argument of the helper.
|
|
1368
|
+
|
|
1369
|
+
### date_select
|
|
1370
|
+
|
|
1371
|
+
Our `date_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-date_select).
|
|
1372
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1373
|
+
|
|
1374
|
+
|
|
1375
|
+
|
|
1376
|
+
```erb
|
|
1377
|
+
<%= form.date_select :interview_date, {selected: form.object.interview_date, bootstrap_form: {label_text: "Choose interview date"}}, {onchange: "this.form.submit();"} %>
|
|
1378
|
+
```
|
|
1379
|
+
|
|
1380
|
+
This generates the following HTML:
|
|
1381
|
+
|
|
1382
|
+
```html
|
|
1383
|
+
<div class="mb-3">
|
|
1384
|
+
<label class="form-label" for="user_interview_date">Choose interview date</label>
|
|
1385
|
+
<fieldset class="rails-bootstrap-forms-date-select">
|
|
1386
|
+
<select id="user_interview_date_1i" name="user[interview_date(1i)]" onchange="this.form.submit();" class="form-select">
|
|
1387
|
+
<option value="2018">2018</option>
|
|
1388
|
+
<option value="2019">2019</option>
|
|
1389
|
+
<option value="2020">2020</option>
|
|
1390
|
+
<option value="2021">2021</option>
|
|
1391
|
+
<option value="2022">2022</option>
|
|
1392
|
+
<option value="2023" selected="selected">2023</option>
|
|
1393
|
+
...
|
|
1394
|
+
...
|
|
1395
|
+
</select>
|
|
1396
|
+
<select id="user_interview_date_2i" name="user[interview_date(2i)]" onchange="this.form.submit();" class="form-select">
|
|
1397
|
+
<option value="1">January</option>
|
|
1398
|
+
<option value="2">February</option>
|
|
1399
|
+
<option value="3">March</option>
|
|
1400
|
+
<option value="4">April</option>
|
|
1401
|
+
<option value="5" selected="selected">May</option>
|
|
1402
|
+
...
|
|
1403
|
+
...
|
|
1404
|
+
</select>
|
|
1405
|
+
<select id="user_interview_date_3i" name="user[interview_date(3i)]" onchange="this.form.submit();" class="form-select">
|
|
1406
|
+
<option value="1">1</option>
|
|
1407
|
+
<option value="2">2</option>
|
|
1408
|
+
<option value="3">3</option>
|
|
1409
|
+
<option value="4">4</option>
|
|
1410
|
+
<option value="5">5</option>
|
|
1411
|
+
<option value="6">6</option>
|
|
1412
|
+
<option value="7">7</option>
|
|
1413
|
+
<option value="8" selected="selected">8</option>
|
|
1414
|
+
...
|
|
1415
|
+
...
|
|
1416
|
+
</select>
|
|
1417
|
+
</fieldset>
|
|
1418
|
+
</div>
|
|
1419
|
+
```
|
|
1420
|
+
|
|
1421
|
+
### time_select
|
|
1422
|
+
|
|
1423
|
+
Our `time_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-time_select).
|
|
1424
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1425
|
+
|
|
1426
|
+
|
|
1427
|
+
|
|
1428
|
+
```erb
|
|
1429
|
+
<%= form.time_select :interview_time, {selected: form.object.interview_time, bootstrap_form: {label_text: "Choose interview time"}}, {onchange: "this.form.submit();"} %>
|
|
1430
|
+
```
|
|
1431
|
+
|
|
1432
|
+
This generates the following HTML:
|
|
1433
|
+
|
|
1434
|
+
```html
|
|
1435
|
+
<div class="mb-3">
|
|
1436
|
+
<label class="form-label" for="user_interview_time">Choose interview time</label>
|
|
1437
|
+
<fieldset class="rails-bootstrap-forms-time-select">
|
|
1438
|
+
<input type="hidden" id="user_interview_time_1i" name="user[interview_time(1i)]" value="1" autocomplete="off">
|
|
1439
|
+
<input type="hidden" id="user_interview_time_2i" name="user[interview_time(2i)]" value="1" autocomplete="off">
|
|
1440
|
+
<input type="hidden" id="user_interview_time_3i" name="user[interview_time(3i)]" value="1" autocomplete="off">
|
|
1441
|
+
<select id="user_interview_time_4i" name="user[interview_time(4i)]" onchange="this.form.submit();" class="form-select">
|
|
1442
|
+
<option value="00">00</option>
|
|
1443
|
+
<option value="01">01</option>
|
|
1444
|
+
<option value="02">02</option>
|
|
1445
|
+
<option value="03">03</option>
|
|
1446
|
+
<option value="04">04</option>
|
|
1447
|
+
...
|
|
1448
|
+
...
|
|
1449
|
+
</select>
|
|
1450
|
+
:
|
|
1451
|
+
<select id="user_interview_time_5i" name="user[interview_time(5i)]" onchange="this.form.submit();" class="form-select">
|
|
1452
|
+
<option value="00">00</option>
|
|
1453
|
+
<option value="01">01</option>
|
|
1454
|
+
<option value="02">02</option>
|
|
1455
|
+
<option value="03">03</option>
|
|
1456
|
+
<option value="04">04</option>
|
|
1457
|
+
<option value="05">05</option>
|
|
1458
|
+
...
|
|
1459
|
+
...
|
|
1460
|
+
</select>
|
|
1461
|
+
</fieldset>
|
|
1462
|
+
</div>
|
|
1463
|
+
```
|
|
1464
|
+
|
|
1465
|
+
### datetime_select
|
|
1466
|
+
|
|
1467
|
+
Our `datetime_select` helper accepts the same arguments as the [default Rails helper](https://api.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-datetime_select).
|
|
1468
|
+
Here's an example of how you pass both options and html_options hashes:
|
|
1469
|
+
|
|
1470
|
+
|
|
1471
|
+
|
|
1472
|
+
```erb
|
|
1473
|
+
<%= form.datetime_select :interview_datetime, {selected: form.object.interview_datetime, bootstrap_form: {label_text: "Choose interview date & time"}}, {onchange: "this.form.submit();"} %>
|
|
1474
|
+
```
|
|
1475
|
+
|
|
1476
|
+
This generates the following HTML:
|
|
1477
|
+
|
|
1478
|
+
```html
|
|
1479
|
+
<div class="mb-3">
|
|
1480
|
+
<label class="form-label" for="user_interview_datetime">Choose interview date & time</label>
|
|
1481
|
+
<fieldset class="rails-bootstrap-forms-datetime-select">
|
|
1482
|
+
<select id="user_interview_datetime_1i" name="user[interview_datetime(1i)]" onchange="this.form.submit();" class="form-select">
|
|
1483
|
+
<option value="2018">2018</option>
|
|
1484
|
+
<option value="2019">2019</option>
|
|
1485
|
+
<option value="2020">2020</option>
|
|
1486
|
+
<option value="2021">2021</option>
|
|
1487
|
+
...
|
|
1488
|
+
...
|
|
1489
|
+
</select>
|
|
1490
|
+
<select id="user_interview_datetime_2i" name="user[interview_datetime(2i)]" onchange="this.form.submit();" class="form-select">
|
|
1491
|
+
<option value="1">January</option>
|
|
1492
|
+
<option value="2">February</option>
|
|
1493
|
+
<option value="3">March</option>
|
|
1494
|
+
<option value="4">April</option>
|
|
1495
|
+
...
|
|
1496
|
+
...
|
|
1497
|
+
</select>
|
|
1498
|
+
<select id="user_interview_datetime_3i" name="user[interview_datetime(3i)]" onchange="this.form.submit();" class="form-select">
|
|
1499
|
+
<option value="1">1</option>
|
|
1500
|
+
<option value="2">2</option>
|
|
1501
|
+
<option value="3">3</option>
|
|
1502
|
+
<option value="4">4</option>
|
|
1503
|
+
<option value="5">5</option>
|
|
1504
|
+
<option value="6">6</option>
|
|
1505
|
+
...
|
|
1506
|
+
...
|
|
1507
|
+
</select>
|
|
1508
|
+
—
|
|
1509
|
+
<select id="user_interview_datetime_4i" name="user[interview_datetime(4i)]" onchange="this.form.submit();" class="form-select">
|
|
1510
|
+
<option value="00">00</option>
|
|
1511
|
+
<option value="01">01</option>
|
|
1512
|
+
<option value="02">02</option>
|
|
1513
|
+
<option value="03">03</option>
|
|
1514
|
+
<option value="04">04</option>
|
|
1515
|
+
...
|
|
1516
|
+
...
|
|
1517
|
+
</select>
|
|
1518
|
+
:
|
|
1519
|
+
<select id="user_interview_datetime_5i" name="user[interview_datetime(5i)]" onchange="this.form.submit();" class="form-select">
|
|
1520
|
+
<option value="00">00</option>
|
|
1521
|
+
<option value="01">01</option>
|
|
1522
|
+
<option value="02">02</option>
|
|
1523
|
+
<option value="03">03</option>
|
|
1524
|
+
<option value="04">04</option>
|
|
1525
|
+
...
|
|
1526
|
+
...
|
|
1527
|
+
</select>
|
|
1528
|
+
</fieldset>
|
|
1529
|
+
</div>
|
|
1530
|
+
```
|
|
1531
|
+
|
|
1532
|
+
## Submit Buttons
|
|
1533
|
+
|
|
1534
|
+
`rails_bootstrap_form` allows to easily create submit button for the form. `rails_bootstrap_form` supports three color variants for submit buttons: `secondary`, `primary`, and `danger`. Submit buttons are supported in `vertical`, `horizontal`, and `inline` layout.
|
|
1535
|
+
Submit buttons in inline form are wrapped inside `div.col-12` to properly render on small width devices.
|
|
1536
|
+
|
|
1537
|
+
|
|
1538
|
+
|
|
1539
|
+
```erb
|
|
1540
|
+
<%= form.secondary "Search" %>
|
|
1541
|
+
<%= form.primary "Register" %>
|
|
1542
|
+
<%= form.danger "Delete" %>
|
|
1543
|
+
```
|
|
1544
|
+
|
|
1545
|
+
This generates the following HTML:
|
|
1546
|
+
|
|
1547
|
+
```html
|
|
1548
|
+
<input type="submit" name="commit" value="Search" class="btn btn-secondary" data-disable-with="Search">
|
|
1549
|
+
<input type="submit" name="commit" value="Register" class="btn btn-primary" data-disable-with="Register">
|
|
1550
|
+
<input type="submit" name="commit" value="Delete" class="btn btn-danger" data-disable-with="Delete">
|
|
1551
|
+
```
|
|
1552
|
+
|
|
1553
|
+
It is also possible to pass additional classes to the button helpers using HTML `class` attribute and that class will be
|
|
1554
|
+
added along with default class of the submit helper.
|
|
1555
|
+
|
|
1556
|
+
|
|
1557
|
+
|
|
1558
|
+
```erb
|
|
1559
|
+
<%= form.primary "Register", class: "register-button" %>
|
|
1560
|
+
```
|
|
1561
|
+
|
|
1562
|
+
This generates the following HTML:
|
|
1563
|
+
|
|
1564
|
+
```html
|
|
1565
|
+
<input type="submit" name="commit" value="Register" class="register-button btn btn-primary" data-disable-with="Register">
|
|
1566
|
+
```
|
|
1567
|
+
|
|
1568
|
+
To render submit helper as a button helper, you can set `render_as_button` option to `true` or pass a block.
|
|
1569
|
+
|
|
1570
|
+
|
|
1571
|
+
|
|
1572
|
+
```erb
|
|
1573
|
+
<%= form.primary "Register", bootstrap_form: {render_as_button: true} %>
|
|
1574
|
+
<%= form.secondary do %>
|
|
1575
|
+
Sign in
|
|
1576
|
+
<% end %>
|
|
1577
|
+
```
|
|
1578
|
+
|
|
1579
|
+
This generates the following HTML:
|
|
1580
|
+
|
|
1581
|
+
```html
|
|
1582
|
+
<button name="button" type="submit" class="btn btn-primary">Register</button>
|
|
1583
|
+
<button name="button" type="submit" class="btn btn-secondary">
|
|
1584
|
+
Sign in
|
|
1585
|
+
</button>
|
|
1586
|
+
```
|
|
1587
|
+
|
|
1588
|
+
## Static controls
|
|
1589
|
+
|
|
1590
|
+
`rails_bootstrap_form` provides form helper `static_field` to render static controls which internally uses [text_field](#text_field) form helper.
|
|
1591
|
+
It sets `readonly` and `disabled` attributes on the text field. By default, `static_field` applies `form-control-plaintext`
|
|
1592
|
+
CSS class to the control but you can change it by using option `static_field_class`.
|
|
1593
|
+
|
|
1594
|
+
You can create a static controls like this:
|
|
1595
|
+
|
|
1596
|
+
|
|
1597
|
+
|
|
1598
|
+
```erb
|
|
1599
|
+
<%= form.static_field :email %>
|
|
1600
|
+
```
|
|
1601
|
+
|
|
1602
|
+
This generates the following HTML:
|
|
1603
|
+
|
|
1604
|
+
```html
|
|
1605
|
+
<div class="mb-3">
|
|
1606
|
+
<label class="form-label required" for="user_email">Email address</label>
|
|
1607
|
+
<input readonly="readonly" disabled="disabled" value="test@example.com" class="form-control-plaintext" aria-required="true" required="required" type="text" name="user[email]" id="user_email">
|
|
1608
|
+
</div>
|
|
1609
|
+
```
|
|
1610
|
+
|
|
1611
|
+
## Floating Labels
|
|
1612
|
+
|
|
1613
|
+
The `floating` option can be used to enable Bootstrap floating labels. This option is supported on text fields, text areas and dropdowns. Here's an example:
|
|
1614
|
+
|
|
1615
|
+
|
|
1616
|
+
|
|
1617
|
+
```erb
|
|
1618
|
+
<%= bootstrap_form_for @user, bootstrap_form: {floating: true} do |form| %>
|
|
1619
|
+
<%= form.text_field :name %>
|
|
1620
|
+
<%= form.email_field :username %>
|
|
1621
|
+
<%= form.password_field :password %>
|
|
1622
|
+
<%= form.fields_for :address, include_id: false do |address_form| %>
|
|
1623
|
+
<%= address_form.text_area :street %>
|
|
1624
|
+
<%= address_form.select :country_id, options_for_select(::Country.pluck(:name, :id), address_form.object.country_id),
|
|
1625
|
+
{include_blank: "Select Country"} %>
|
|
1626
|
+
<% end %>
|
|
1627
|
+
<%= form.primary "Register" %>
|
|
1628
|
+
<% end %>
|
|
1629
|
+
```
|
|
1630
|
+
|
|
1631
|
+
This generates the following HTML:
|
|
1632
|
+
|
|
1633
|
+
```html
|
|
1634
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
1635
|
+
<div class="mb-3">
|
|
1636
|
+
<div class="form-floating">
|
|
1637
|
+
<input class="form-control" aria-required="true" required="required" placeholder="Name" type="text" name="user[name]" id="user_name">
|
|
1638
|
+
<label class="form-label required" for="user_name">Name</label>
|
|
1639
|
+
</div>
|
|
1640
|
+
</div>
|
|
1641
|
+
<div class="mb-3">
|
|
1642
|
+
<div class="form-floating">
|
|
1643
|
+
<input class="form-control" placeholder="Username" type="email" name="user[username]" id="user_username">
|
|
1644
|
+
<label class="form-label" for="user_username">Username</label>
|
|
1645
|
+
</div>
|
|
1646
|
+
</div>
|
|
1647
|
+
<div class="mb-3">
|
|
1648
|
+
<div class="form-floating">
|
|
1649
|
+
<input class="form-control" aria-required="true" required="required" placeholder="Password" type="password" name="user[password]" id="user_password">
|
|
1650
|
+
<label class="form-label required" for="user_password">Password</label>
|
|
1651
|
+
</div>
|
|
1652
|
+
</div>
|
|
1653
|
+
<div class="mb-3">
|
|
1654
|
+
<div class="form-floating">
|
|
1655
|
+
<textarea class="form-control" aria-required="true" required="required" placeholder="Street" name="user[address_attributes][street]" id="user_address_attributes_street"></textarea>
|
|
1656
|
+
<label class="form-label required" for="user_address_attributes_street">Street</label>
|
|
1657
|
+
</div>
|
|
1658
|
+
</div>
|
|
1659
|
+
<div class="mb-3">
|
|
1660
|
+
<div class="form-floating">
|
|
1661
|
+
<select class="form-select" aria-required="true" required="required" placeholder="Country" name="user[address_attributes][country_id]" id="user_address_attributes_country_id">
|
|
1662
|
+
<option value="">Select Country</option>
|
|
1663
|
+
<option value="1">India</option>
|
|
1664
|
+
<option value="2">Ireland</option>
|
|
1665
|
+
<option value="3">United States</option>
|
|
1666
|
+
<option value="4">United Kingdom</option>
|
|
1667
|
+
</select>
|
|
1668
|
+
<label class="form-label required" for="user_address_attributes_country_id">Country</label>
|
|
1669
|
+
</div>
|
|
1670
|
+
</div>
|
|
1671
|
+
<input type="submit" name="commit" value="Register" class="btn btn-primary" data-disable-with="Register">
|
|
1672
|
+
</form>
|
|
1673
|
+
```
|
|
1674
|
+
|
|
1675
|
+
## Validation and Errors
|
|
1676
|
+
|
|
1677
|
+
By default, `rails_bootstrap_form` generations in-line errors which appear below the field.
|
|
1678
|
+
|
|
1679
|
+
### Inline Errors
|
|
1680
|
+
|
|
1681
|
+
By default, fields that have validation errors will be outlined in red and the error will be displayed below the field. Here's an example:
|
|
1682
|
+
|
|
1683
|
+
|
|
1684
|
+
|
|
1685
|
+
```erb
|
|
1686
|
+
<%= bootstrap_form_for @user do |form| %>
|
|
1687
|
+
<%= form.email_field :email %>
|
|
1688
|
+
<%= form.password_field :password %>
|
|
1689
|
+
<%= form.primary "Register" %>
|
|
1690
|
+
<% end %>
|
|
1691
|
+
```
|
|
1692
|
+
|
|
1693
|
+
This generates the following HTML:
|
|
1694
|
+
|
|
1695
|
+
```html
|
|
1696
|
+
<form role="form" novalidate="novalidate" class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
|
|
1697
|
+
<div class="mb-3">
|
|
1698
|
+
<label class="form-label required is-invalid" for="user_email">Email address</label>
|
|
1699
|
+
<input class="form-control is-invalid" aria-required="true" required="required" type="email" name="user[email]" id="user_email">
|
|
1700
|
+
<div class="invalid-feedback">can't be blank</div>
|
|
1701
|
+
<div class="form-text text-muted">Please use official email address</div>
|
|
1702
|
+
</div>
|
|
1703
|
+
<div class="mb-3">
|
|
1704
|
+
<label class="form-label required is-invalid" for="user_password">Password</label>
|
|
1705
|
+
<input class="form-control is-invalid" aria-required="true" required="required" type="password" name="user[password]" id="user_password">
|
|
1706
|
+
<div class="invalid-feedback">can't be blank</div>
|
|
1707
|
+
</div>
|
|
1708
|
+
<input type="submit" name="commit" value="Register" class="btn btn-primary" data-disable-with="Register">
|
|
1709
|
+
</form>
|
|
1710
|
+
```
|
|
1711
|
+
|
|
1712
|
+
## Required Fields
|
|
1713
|
+
|
|
1714
|
+
A label that is associated with a mandatory field is automatically annotated with a `required` CSS class. `rails_bootstrap_form` provides styling for required fields.
|
|
1715
|
+
You're also free to add any appropriate CSS to style required fields as desired.
|
|
1716
|
+
|
|
1717
|
+
The label `required` class is determined based on the definition of a presence validator with the associated model attribute. Presently this is one of: `ActiveRecord::Validations::PresenceValidator` or `ActiveModel::Validations::PresenceValidator`.
|
|
1718
|
+
|
|
1719
|
+
In cases where this behaviour is undesirable, use the required option to force the class to be present or absent:
|
|
1720
|
+
|
|
1721
|
+
|
|
1722
|
+
|
|
1723
|
+
```
|
|
1724
|
+
<%= form.date_field :birth_date, required: false %>
|
|
1725
|
+
<%= form.url_field :blog_url, required: true %>
|
|
1726
|
+
```
|
|
1727
|
+
|
|
1728
|
+
This generates the following HTML:
|
|
1729
|
+
|
|
1730
|
+
```html
|
|
1731
|
+
<div class="mb-3">
|
|
1732
|
+
<label class="form-label" for="user_birth_date">Birth date</label>
|
|
1733
|
+
<input class="form-control" type="date" name="user[birth_date]" id="user_birth_date">
|
|
1734
|
+
</div>
|
|
1735
|
+
<div class="mb-3">
|
|
1736
|
+
<label class="form-label required" for="user_blog_url">Blog URL</label>
|
|
1737
|
+
<input required="required" class="form-control" aria-required="true" type="url" name="user[blog_url]" id="user_blog_url">
|
|
1738
|
+
</div>
|
|
1739
|
+
```
|
|
1740
|
+
|
|
1741
|
+
### Required `belongs_to` associations
|
|
1742
|
+
|
|
1743
|
+
Adding a form control for a `belongs_to` associated field will automatically pick up the associated presence validator.
|
|
1744
|
+
|
|
1745
|
+
|
|
1746
|
+
|
|
1747
|
+
```erb
|
|
1748
|
+
<%= form.collection_radio_buttons :fruit_id, ::Fruit.all, :id, :name, {checked: form.object.fruit_id} %>
|
|
1749
|
+
```
|
|
1750
|
+
|
|
1751
|
+
This generates the following HTML:
|
|
1752
|
+
|
|
1753
|
+
```html
|
|
1754
|
+
<div class="mb-3">
|
|
1755
|
+
<label class="form-label required" for="user_fruit_id">Favorite fruit</label>
|
|
1756
|
+
<div class="rails-bootstrap-forms-collection-radio-buttons">
|
|
1757
|
+
<div class="form-check form-check-inline">
|
|
1758
|
+
<input class="form-check-input" type="radio" value="1" name="user[fruit_id]" id="user_fruit_id_1">
|
|
1759
|
+
<label class="form-check-label" for="user_fruit_id_1">Mango</label>
|
|
1760
|
+
</div>
|
|
1761
|
+
<div class="form-check form-check-inline">
|
|
1762
|
+
<input class="form-check-input" type="radio" value="2" name="user[fruit_id]" id="user_fruit_id_2">
|
|
1763
|
+
<label class="form-check-label" for="user_fruit_id_2">Apple</label>
|
|
1764
|
+
</div>
|
|
1765
|
+
<div class="form-check form-check-inline">
|
|
1766
|
+
<input class="form-check-input" type="radio" value="3" name="user[fruit_id]" id="user_fruit_id_3">
|
|
1767
|
+
<label class="form-check-label" for="user_fruit_id_3">Orange</label>
|
|
1768
|
+
</div>
|
|
1769
|
+
<div class="form-check form-check-inline">
|
|
1770
|
+
<input class="form-check-input" type="radio" value="4" name="user[fruit_id]" id="user_fruit_id_4">
|
|
1771
|
+
<label class="form-check-label" for="user_fruit_id_4">Watermelon</label>
|
|
1772
|
+
</div>
|
|
1773
|
+
</div>
|
|
1774
|
+
<div class="form-text text-muted">Select your favorite fruit</div>
|
|
1775
|
+
</div>
|
|
1776
|
+
```
|
|
1777
|
+
|
|
1778
|
+
## Internationalization
|
|
1779
|
+
|
|
1780
|
+
`rails_bootstrap_form` follows standard rails conventions so it's i18n-ready. See more [here](http://guides.rubyonrails.org/i18n.html#translations-for-active-record-models)
|
|
1781
|
+
|
|
1782
|
+
## Other Tips
|
|
1783
|
+
|
|
1784
|
+
### Empty But Visible Labels
|
|
1785
|
+
|
|
1786
|
+
Some third party plug-ins require an empty but visible label on an input control. The `hide_label` option generates a label that won't appear on the screen, but it's considered invisible and therefore doesn't work with such a plug-in. An empty label (e.g. `""`) causes the underlying Rails helpers to generate a label based on the field's attribute's name.
|
|
1787
|
+
|
|
1788
|
+
The solution is to use a zero-width character for the label, or some other "empty" HTML. For example:
|
|
1789
|
+
|
|
1790
|
+
```erb
|
|
1791
|
+
bootstrap_form: {label_text: "​".html_safe}
|
|
1792
|
+
```
|
|
1793
|
+
|
|
1794
|
+
or
|
|
1795
|
+
|
|
1796
|
+
```erb
|
|
1797
|
+
bootstrap_form: {label_text: "<span></span>".html_safe}
|
|
1798
|
+
```
|
|
1799
|
+
|
|
1800
|
+
## Contributing
|
|
1801
|
+
|
|
1802
|
+
I welcome contributions. If you wish to contribute in `rails_bootstrap_form`, please review the [Contributing]() document first.
|
|
1803
|
+
|
|
1804
|
+
## License
|
|
1805
|
+
|
|
1806
|
+
Copyright 2023 [Harshal V. LADHE](https://github.com/shivam091), Released under the MIT License
|