bootstrap_form 5.3.2 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.devcontainer.json +38 -0
- data/.github/workflows/ruby.yml +11 -4
- data/.gitignore +27 -8
- data/.rubocop.yml +5 -6
- data/.yarnrc +1 -1
- data/CHANGELOG.md +5 -0
- data/CONTRIBUTING.md +34 -82
- data/DOCKER.md +95 -0
- data/Gemfile +5 -1
- data/README.md +143 -80
- data/RELEASING.md +3 -8
- data/Rakefile +23 -0
- data/bootstrap_form.gemspec +1 -1
- data/compose.yml +36 -0
- data/gemfiles/7.2.gemfile +9 -0
- data/gemfiles/8.0.gemfile +9 -0
- data/gemfiles/8.1.gemfile +9 -0
- data/gemfiles/common.gemfile +1 -2
- data/gemfiles/edge.gemfile +5 -1
- data/lib/bootstrap_form/action_view_extensions/form_helper.rb +6 -6
- data/lib/bootstrap_form/components/labels.rb +4 -3
- data/lib/bootstrap_form/components/validation.rb +1 -2
- data/lib/bootstrap_form/form_builder.rb +16 -8
- data/lib/bootstrap_form/form_group.rb +3 -3
- data/lib/bootstrap_form/form_group_builder.rb +3 -3
- data/lib/bootstrap_form/helpers/bootstrap.rb +15 -12
- data/lib/bootstrap_form/inputs/base.rb +15 -6
- data/lib/bootstrap_form/inputs/check_box.rb +11 -5
- data/lib/bootstrap_form/inputs/collection_check_boxes.rb +2 -8
- data/lib/bootstrap_form/inputs/file_field.rb +1 -1
- data/lib/bootstrap_form/inputs/range_field.rb +1 -1
- data/lib/bootstrap_form/inputs/rich_text_area.rb +3 -1
- data/lib/bootstrap_form/inputs/submit.rb +1 -1
- data/lib/bootstrap_form/inputs/text_area.rb +2 -0
- data/lib/bootstrap_form/version.rb +2 -2
- data/lib/bootstrap_form.rb +0 -6
- metadata +14 -12
- data/Dockerfile +0 -21
- data/docker-compose.yml +0 -31
- data/gemfiles/6.1.gemfile +0 -4
- data/gemfiles/7.0.gemfile +0 -5
data/README.md
CHANGED
|
@@ -25,43 +25,64 @@ Some other nice things that `bootstrap_form` does for you are:
|
|
|
25
25
|
|
|
26
26
|
`bootstrap_form` supports at a minimum the currently supported versions of Ruby and Rails:
|
|
27
27
|
|
|
28
|
-
* Ruby 3.
|
|
29
|
-
* Rails
|
|
28
|
+
* Ruby 3.2+ (https://www.ruby-lang.org/en/downloads/branches/)
|
|
29
|
+
* Rails 7.2+ (https://guides.rubyonrails.org/maintenance_policy.html)
|
|
30
30
|
* Bootstrap 5.0+
|
|
31
31
|
|
|
32
32
|
## Installation
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
This gem needs Bootstrap. The gem itself doesn't really care how Bootstrap is included in your application. There are many ways to install Bootstrap in a Rails application. Covering them all is beyond the scope of this README. However, here are some hints for a couple of common options.
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
If you're creating a new Rails app, create it with at least the following options:
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
rails new --javascript=esbuild --css=bootstrap <application-name>
|
|
38
40
|
```
|
|
39
41
|
|
|
40
|
-
|
|
42
|
+
`esbuild` can be any of the options, _except_ the default `importmaps`.
|
|
43
|
+
|
|
44
|
+
If you have an existing project, and it's processing CSS and JavaScript with some sort of front-end preprocessor, then install Bootstrap for your front-end preprocessor. That's probably something like this:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
yarn add bootstrap popper.js
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
You can use this gem with other ways of installing Bootstrap, but how to do so is outside the scope of this README.
|
|
41
51
|
|
|
42
|
-
|
|
52
|
+
Once Bootstrap is installed, add the `bootstrap_form` gem to your `Gemfile`:
|
|
43
53
|
|
|
44
54
|
```ruby
|
|
45
|
-
gem "bootstrap_form", "~> 5.
|
|
55
|
+
gem "bootstrap_form", "~> 5.5"
|
|
46
56
|
```
|
|
47
57
|
|
|
48
58
|
Then:
|
|
49
59
|
|
|
50
60
|
`bundle install`
|
|
51
61
|
|
|
52
|
-
|
|
53
|
-
If you use Rails in the default mode without any pre-processor, you'll have to add the following line to your `application.css` file:
|
|
62
|
+
`bootstrap_form` uses a very small number of its own CSS styles. These styles are used in HTML generated by the `error_summary` and `alert_message` error helpers, and the `date_select`, `time_select`, and `datetime_select` helpers. If you're not using those helpers, you don't need to install the `bootstrap_form` CSS styles.
|
|
54
63
|
|
|
55
|
-
|
|
56
|
-
|
|
64
|
+
If you do need the CSS styles, add them to your CSS bundle (usually your `application.scss` file). The way to do this depends on whether you're using Propshaft (the Rails 8 default), or Sprockets (pre-Rails 8). (Check your `Gemfile` to see whether you're using `sprockets-rails` or `propshaft`.)
|
|
65
|
+
|
|
66
|
+
If you're using Propshaft, add the styles to your CSS bundle like this:
|
|
67
|
+
|
|
68
|
+
```scss
|
|
69
|
+
@use "rails_bootstrap_forms";
|
|
57
70
|
```
|
|
58
71
|
|
|
59
|
-
If you
|
|
72
|
+
If you're using Sprockets, add the styles to your CSS bundle like this:
|
|
60
73
|
|
|
61
74
|
```scss
|
|
62
|
-
@import "rails_bootstrap_forms";
|
|
75
|
+
@import "rails_bootstrap_forms.css";
|
|
63
76
|
```
|
|
64
77
|
|
|
78
|
+
If you're using Sprockets, you can also consider using the `bootstrap` gem to your `Gemfile`, as a way of installing Bootstrap itself. However, we haven't used this approach for a few years. Please report an issue if it doesn't work:
|
|
79
|
+
|
|
80
|
+
```ruby
|
|
81
|
+
gem "bootstrap", "~> 5.0"
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
And follow the remaining instructions in the [official bootstrap installation guide](https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails) for setting up `application.scss` and `application.js`.
|
|
85
|
+
|
|
65
86
|
## Usage
|
|
66
87
|
|
|
67
88
|
### bootstrap_form_for
|
|
@@ -91,7 +112,7 @@ This generates the following HTML:
|
|
|
91
112
|
<input class="form-control" id="user_password" name="user[password]" type="password">
|
|
92
113
|
</div>
|
|
93
114
|
<div class="form-check mb-3">
|
|
94
|
-
<input
|
|
115
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
|
95
116
|
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
|
96
117
|
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
97
118
|
</div>
|
|
@@ -151,7 +172,7 @@ This generates:
|
|
|
151
172
|
<small class="form-text text-muted">A good password should be at least six characters long</small>
|
|
152
173
|
</div>
|
|
153
174
|
<div class="form-check mb-3">
|
|
154
|
-
<input
|
|
175
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
|
155
176
|
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
|
156
177
|
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
157
178
|
</div>
|
|
@@ -529,11 +550,25 @@ It's just a short form of `wrapper: { class: 'mb-3 additional-class' }`.
|
|
|
529
550
|
|
|
530
551
|
If you don't want any class on the form group div, you can set it to `false`: `wrapper_class: false`.
|
|
531
552
|
|
|
553
|
+
|
|
554
|
+
```erb
|
|
555
|
+
<%= f.text_field :name, wrapper: { class: false } %>
|
|
556
|
+
```
|
|
557
|
+
|
|
558
|
+
This generates:
|
|
559
|
+
|
|
560
|
+
```html
|
|
561
|
+
<div>
|
|
562
|
+
<label class="form-label" for="user_name">Name</label>
|
|
563
|
+
<input class="form-control" id="user_name" name="user[name]" type="text">
|
|
564
|
+
</div>
|
|
565
|
+
```
|
|
566
|
+
|
|
532
567
|
### Suppressing the Form Group Altogether
|
|
533
568
|
|
|
534
569
|
You may want to define your own form group div around a field. To do so, add the option `wrapper: false` to the input field. For example:
|
|
535
570
|
|
|
536
|
-
|
|
537
572
|
```erb
|
|
538
573
|
<%= f.form_group :user do %>
|
|
539
574
|
<%= f.email_field :email, wrapper: false %>
|
|
@@ -554,7 +589,7 @@ Note that Bootstrap relies on the form group div to correctly format most fields
|
|
|
554
589
|
|
|
555
590
|
Our select helper accepts the same arguments as the [default Rails helper](http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select). Here's an example of how you pass both options and html_options hashes:
|
|
556
591
|
|
|
557
|
-
|
|
558
593
|
```erb
|
|
559
594
|
<%= f.select :product, [["Apple", 1], ["Grape", 2]], { label: "Choose your favorite fruit:", wrapper: { class: 'has-warning', data: { foo: 'bar' } } }, { class: "selectpicker" } %>
|
|
560
595
|
```
|
|
@@ -577,7 +612,7 @@ Checkboxes and radios should be placed inside of a `form_group` to render
|
|
|
577
612
|
properly. The following example ensures that the entire form group will display
|
|
578
613
|
an error if an associated validations fails:
|
|
579
614
|
|
|
580
|
-
|
|
581
616
|
```erb
|
|
582
617
|
<%= f.form_group :skill_level, label: { text: "Skill" }, help: "Optional Help Text" do %>
|
|
583
618
|
<%= f.radio_button :skill_level, 0, label: "Novice", checked: true %>
|
|
@@ -611,7 +646,7 @@ This generates:
|
|
|
611
646
|
</div>
|
|
612
647
|
<div class="mb-3">
|
|
613
648
|
<div class="form-check mb-3">
|
|
614
|
-
<input
|
|
649
|
+
<input name="user[terms]" type="hidden" value="0">
|
|
615
650
|
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1">
|
|
616
651
|
<label class="form-check-label" for="user_terms">I agree to the Terms of Service</label>
|
|
617
652
|
</div>
|
|
@@ -620,7 +655,7 @@ This generates:
|
|
|
620
655
|
|
|
621
656
|
You can also create a checkbox using a block:
|
|
622
657
|
|
|
623
|
-
|
|
624
659
|
```erb
|
|
625
660
|
<%= f.form_group :terms, label: { text: "Optional Label" } do %>
|
|
626
661
|
<%= f.check_box :terms do %>
|
|
@@ -635,7 +670,7 @@ This generates:
|
|
|
635
670
|
<div class="mb-3">
|
|
636
671
|
<label class="form-label" for="user_terms">Optional Label</label>
|
|
637
672
|
<div class="form-check mb-3">
|
|
638
|
-
<input
|
|
673
|
+
<input name="user[terms]" type="hidden" value="0">
|
|
639
674
|
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1">
|
|
640
675
|
<label class="form-check-label" for="user_terms">
|
|
641
676
|
You need to check this box to accept our terms of service and privacy policy
|
|
@@ -646,7 +681,7 @@ This generates:
|
|
|
646
681
|
|
|
647
682
|
To display checkboxes and radios inline, pass the `inline: true` option:
|
|
648
683
|
|
|
649
|
-
|
|
650
685
|
```erb
|
|
651
686
|
<%= f.form_group :skill_level, label: { text: "Skill" } do %>
|
|
652
687
|
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true %>
|
|
@@ -677,7 +712,7 @@ This generates:
|
|
|
677
712
|
|
|
678
713
|
Check boxes and radio buttons are wrapped in a `div.form-check`. You can add classes to this `div` with the `:wrapper_class` option:
|
|
679
714
|
|
|
680
|
-
|
|
681
716
|
```erb
|
|
682
717
|
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper_class: "w-auto" %>
|
|
683
718
|
```
|
|
@@ -693,7 +728,7 @@ This generates:
|
|
|
693
728
|
|
|
694
729
|
You can also add a style to the tag using the `wrapper` option:
|
|
695
730
|
|
|
696
|
-
|
|
697
732
|
```erb
|
|
698
733
|
<%= f.check_box :skilled, inline: true, wrapper: {style: "color: green"} %>
|
|
699
734
|
<%= f.radio_button :skill_level, 0, label: "Novice", inline: true, wrapper: {class: 'w-auto', style: "color: red"} %>
|
|
@@ -703,7 +738,7 @@ This generates:
|
|
|
703
738
|
|
|
704
739
|
```html
|
|
705
740
|
<div class="form-check form-check-inline mb-3" style="color: green">
|
|
706
|
-
<input
|
|
741
|
+
<input name="user[skilled]" type="hidden" value="0">
|
|
707
742
|
<input class="form-check-input" id="user_skilled" name="user[skilled]" type="checkbox" value="1">
|
|
708
743
|
<label class="form-check-label" for="user_skilled">Skilled</label>
|
|
709
744
|
</div>
|
|
@@ -717,7 +752,7 @@ This generates:
|
|
|
717
752
|
|
|
718
753
|
To render checkboxes as switches with Bootstrap 4.2+, use `switch: true`:
|
|
719
754
|
|
|
720
|
-
|
|
721
756
|
```erb
|
|
722
757
|
<%= f.check_box :remember_me, switch: true %>
|
|
723
758
|
```
|
|
@@ -726,7 +761,7 @@ This generates:
|
|
|
726
761
|
|
|
727
762
|
```html
|
|
728
763
|
<div class="form-check mb-3 form-switch">
|
|
729
|
-
<input
|
|
764
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
|
730
765
|
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
|
731
766
|
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
732
767
|
</div>
|
|
@@ -737,7 +772,7 @@ This generates:
|
|
|
737
772
|
`bootstrap_form` also provides helpers that automatically create the
|
|
738
773
|
`form_group` and the `radio_button`s or `check_box`es for you:
|
|
739
774
|
|
|
740
|
-
|
|
741
776
|
```erb
|
|
742
777
|
<%= f.collection_radio_buttons :skill_level, Skill.all, :id, :name %>
|
|
743
778
|
<%= f.collection_check_boxes :skills, Skill.all, :id, :name %>
|
|
@@ -757,7 +792,7 @@ This generates:
|
|
|
757
792
|
<label class="form-check-label" for="user_skill_level_2">Farming</label>
|
|
758
793
|
</div>
|
|
759
794
|
</div>
|
|
760
|
-
<input
|
|
795
|
+
<input id="user_skills" name="user[skills][]" type="hidden" value="">
|
|
761
796
|
<div class="mb-3">
|
|
762
797
|
<label class="form-label" for="user_skills">Skills</label>
|
|
763
798
|
<div class="form-check">
|
|
@@ -783,7 +818,7 @@ Collection methods accept these options:
|
|
|
783
818
|
|
|
784
819
|
To add `data-` attributes to a collection of radio buttons, map your models to an array and add a hash:
|
|
785
820
|
|
|
786
|
-
|
|
787
822
|
```erb
|
|
788
823
|
<%# Use the :first and :second elements of the array to be the value and label respectively %>
|
|
789
824
|
<%- choices = @collection.map { |addr| [ addr.id, addr.street, { 'data-zip-code': addr.zip_code } ] } -%>
|
|
@@ -811,7 +846,7 @@ This generates:
|
|
|
811
846
|
|
|
812
847
|
You can create a range control like this:
|
|
813
848
|
|
|
814
|
-
|
|
815
850
|
```erb
|
|
816
851
|
<%= f.range_field :excellence %>
|
|
817
852
|
```
|
|
@@ -829,7 +864,7 @@ This generates:
|
|
|
829
864
|
|
|
830
865
|
You can create a static control like this:
|
|
831
866
|
|
|
832
|
-
|
|
833
868
|
```erb
|
|
834
869
|
<%= f.static_control :email %>
|
|
835
870
|
```
|
|
@@ -845,7 +880,7 @@ This generates:
|
|
|
845
880
|
|
|
846
881
|
Here's the output for a horizontal layout:
|
|
847
882
|
|
|
848
|
-
|
|
849
884
|
```erb
|
|
850
885
|
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
|
851
886
|
<%= f.static_control :email %>
|
|
@@ -867,7 +902,7 @@ This generates:
|
|
|
867
902
|
|
|
868
903
|
You can also create a static control that isn't based on a model attribute:
|
|
869
904
|
|
|
870
|
-
|
|
871
906
|
```erb
|
|
872
907
|
<%= f.static_control :field_name, label: "Custom Static Control", value: "Content Here" %>
|
|
873
908
|
```
|
|
@@ -885,7 +920,7 @@ This generates:
|
|
|
885
920
|
|
|
886
921
|
You can also create the static control the following way, if you don't need to get the value of the static control as a parameter when the form is submitted:
|
|
887
922
|
|
|
888
|
-
|
|
889
924
|
```erb
|
|
890
925
|
<%= f.static_control label: "Custom Static Control", value: "Content Here", name: nil %>
|
|
891
926
|
```
|
|
@@ -906,7 +941,25 @@ The value of the block would be used for the content of the static "control".
|
|
|
906
941
|
Bootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the `value:` option.
|
|
907
942
|
Passing a block to `static_control` no longer has any effect.
|
|
908
943
|
|
|
909
|
-
## Date Helpers
|
|
944
|
+
## Date and Time Helpers
|
|
945
|
+
|
|
946
|
+
You can create a date picker, time picker, or date-time picker with `date_field`, `time_field`, or `datetime_field`, like this:
|
|
947
|
+
|
|
948
|
+
|
|
949
|
+
```erb
|
|
950
|
+
<%= f.date_field :joined_at, class: "w-auto" %>
|
|
951
|
+
```
|
|
952
|
+
|
|
953
|
+
This generates:
|
|
954
|
+
|
|
955
|
+
```html
|
|
956
|
+
<div class="mb-3">
|
|
957
|
+
<label class="form-label" for="user_joined_at">Joined at</label>
|
|
958
|
+
<input class="form-control w-auto" id="user_joined_at" name="user[joined_at]" type="date">
|
|
959
|
+
</div>
|
|
960
|
+
```
|
|
961
|
+
|
|
962
|
+
For backwards compatibility, there are also helpers for `date_select`, `time_select`, and `datetime_select`.
|
|
910
963
|
|
|
911
964
|
The multiple selects that the date and time helpers (`date_select`,
|
|
912
965
|
`time_select`, `datetime_select`) generate are wrapped inside a
|
|
@@ -919,7 +972,7 @@ this by defining these selects as `inline-block` and a width of `auto`.
|
|
|
919
972
|
The `btn btn-secondary` CSS classes are automatically added to your submit
|
|
920
973
|
buttons.
|
|
921
974
|
|
|
922
|
-
|
|
923
976
|
```erb
|
|
924
977
|
<%= f.submit %>
|
|
925
978
|
```
|
|
@@ -933,7 +986,7 @@ This generates:
|
|
|
933
986
|
You can also use the `primary` helper, which adds `btn btn-primary` to your
|
|
934
987
|
submit button:
|
|
935
988
|
|
|
936
|
-
|
|
937
990
|
```erb
|
|
938
991
|
<%= f.primary "Optional Label" %>
|
|
939
992
|
```
|
|
@@ -946,7 +999,7 @@ This generates:
|
|
|
946
999
|
|
|
947
1000
|
You can specify your own classes like this:
|
|
948
1001
|
|
|
949
|
-
|
|
950
1003
|
```erb
|
|
951
1004
|
<%= f.submit "Log In", class: "btn btn-success" %>
|
|
952
1005
|
```
|
|
@@ -962,7 +1015,7 @@ it will be rendered as an HTML button, instead of an input tag. This allows you
|
|
|
962
1015
|
to specify HTML content and styling for your buttons (such as adding
|
|
963
1016
|
illustrative icons to them). For example, the following statements
|
|
964
1017
|
|
|
965
|
-
|
|
966
1019
|
```erb
|
|
967
1020
|
<%= f.primary "Save changes <span class='bi bi-save'></span>".html_safe, render_as_button: true %>
|
|
968
1021
|
|
|
@@ -996,7 +1049,7 @@ Bootstrap classes), or for element targeting via CSS classes.
|
|
|
996
1049
|
Be aware, however, that using the `class` option will discard any extra classes
|
|
997
1050
|
you add. As an example, the following button declarations
|
|
998
1051
|
|
|
999
|
-
|
|
1000
1053
|
```erb
|
|
1001
1054
|
<%= f.primary "My Nice Button", extra_class: 'my-button' %>
|
|
1002
1055
|
|
|
@@ -1014,7 +1067,7 @@ will be rendered as
|
|
|
1014
1067
|
|
|
1015
1068
|
## Rich Text Areas AKA Trix Editor
|
|
1016
1069
|
|
|
1017
|
-
|
|
1018
1071
|
```erb
|
|
1019
1072
|
<%= f.rich_text_area(:life_story) %>
|
|
1020
1073
|
```
|
|
@@ -1024,7 +1077,7 @@ will be rendered as:
|
|
|
1024
1077
|
```html
|
|
1025
1078
|
<div class="mb-3">
|
|
1026
1079
|
<label class="form-label" for="user_life_story">Life story</label>
|
|
1027
|
-
<input
|
|
1080
|
+
<input id="user_life_story_trix_input_user" name="user[life_story]" type="hidden">
|
|
1028
1081
|
<trix-toolbar id="trix-toolbar-1">
|
|
1029
1082
|
<div class="trix-button-row">
|
|
1030
1083
|
<span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
|
|
@@ -1082,7 +1135,7 @@ The `hidden_field` helper in `bootstrap_form` calls the Rails helper directly, a
|
|
|
1082
1135
|
If you want to use the original Rails form helpers for a particular field,
|
|
1083
1136
|
append `_without_bootstrap` to the helper:
|
|
1084
1137
|
|
|
1085
|
-
|
|
1086
1139
|
```erb
|
|
1087
1140
|
<%= f.text_field_without_bootstrap :email %>
|
|
1088
1141
|
```
|
|
@@ -1104,7 +1157,7 @@ To use an inline-layout form, use the `layout: :inline` option. To hide labels,
|
|
|
1104
1157
|
use the `hide_label: true` option, which keeps your labels accessible to those
|
|
1105
1158
|
using screen readers.
|
|
1106
1159
|
|
|
1107
|
-
|
|
1108
1161
|
```erb
|
|
1109
1162
|
<%= bootstrap_form_for(@user, layout: :inline) do |f| %>
|
|
1110
1163
|
<%= f.email_field :email, hide_label: true %>
|
|
@@ -1128,7 +1181,7 @@ This generates:
|
|
|
1128
1181
|
</div>
|
|
1129
1182
|
<div class="col">
|
|
1130
1183
|
<div class="form-check form-check-inline">
|
|
1131
|
-
<input
|
|
1184
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
|
1132
1185
|
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
|
1133
1186
|
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
1134
1187
|
</div>
|
|
@@ -1141,7 +1194,7 @@ This generates:
|
|
|
1141
1194
|
|
|
1142
1195
|
To skip label rendering at all, use `skip_label: true` option.
|
|
1143
1196
|
|
|
1144
|
-
|
|
1145
1198
|
```erb
|
|
1146
1199
|
<%= f.password_field :password, skip_label: true %>
|
|
1147
1200
|
```
|
|
@@ -1163,7 +1216,7 @@ To use a horizontal-layout form with labels to the left of the control, use the
|
|
|
1163
1216
|
In the example below, the submit button has been wrapped in a `form_group` to
|
|
1164
1217
|
keep it properly aligned.
|
|
1165
1218
|
|
|
1166
|
-
|
|
1167
1220
|
```erb
|
|
1168
1221
|
<%= bootstrap_form_for(@user, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
|
|
1169
1222
|
<%= f.email_field :email %>
|
|
@@ -1194,7 +1247,7 @@ This generates:
|
|
|
1194
1247
|
<div class="mb-3 row">
|
|
1195
1248
|
<div class="col-sm-10 offset-sm-2">
|
|
1196
1249
|
<div class="form-check">
|
|
1197
|
-
<input
|
|
1250
|
+
<input name="user[remember_me]" type="hidden" value="0">
|
|
1198
1251
|
<input class="form-check-input" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
|
|
1199
1252
|
<label class="form-check-label" for="user_remember_me">Remember me</label>
|
|
1200
1253
|
</div>
|
|
@@ -1210,7 +1263,7 @@ This generates:
|
|
|
1210
1263
|
|
|
1211
1264
|
The `label_col` and `control_col` css classes can also be changed per control:
|
|
1212
1265
|
|
|
1213
|
-
|
|
1214
1267
|
```erb
|
|
1215
1268
|
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
|
1216
1269
|
<%= f.email_field :email %>
|
|
@@ -1241,7 +1294,7 @@ This generates:
|
|
|
1241
1294
|
<div class="mb-3 row">
|
|
1242
1295
|
<div class="col-sm-10">
|
|
1243
1296
|
<div class="form-check">
|
|
1244
|
-
<input
|
|
1297
|
+
<input name="user[terms]" type="hidden" value="0">
|
|
1245
1298
|
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1">
|
|
1246
1299
|
<label class="form-check-label" for="user_terms">Terms</label>
|
|
1247
1300
|
</div>
|
|
@@ -1277,7 +1330,7 @@ end
|
|
|
1277
1330
|
|
|
1278
1331
|
Control col wrapper class can be modified with `add_control_col_class`. This option will preserve column definition:
|
|
1279
1332
|
|
|
1280
|
-
|
|
1281
1334
|
```erb
|
|
1282
1335
|
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
|
1283
1336
|
<%= f.email_field :email %>
|
|
@@ -1316,7 +1369,7 @@ This generates:
|
|
|
1316
1369
|
|
|
1317
1370
|
The form-level `layout` can be overridden per field, unless the form-level layout was `inline`:
|
|
1318
1371
|
|
|
1319
|
-
|
|
1320
1373
|
```erb
|
|
1321
1374
|
<%= bootstrap_form_for(@user, layout: :horizontal) do |f| %>
|
|
1322
1375
|
<%= f.email_field :email %>
|
|
@@ -1355,7 +1408,7 @@ This generates:
|
|
|
1355
1408
|
</div>
|
|
1356
1409
|
<div class="mb-3">
|
|
1357
1410
|
<div class="form-check">
|
|
1358
|
-
<input
|
|
1411
|
+
<input name="user[terms]" type="hidden" value="0">
|
|
1359
1412
|
<input class="form-check-input" id="user_terms" name="user[terms]" type="checkbox" value="1">
|
|
1360
1413
|
<label class="form-check-label" for="user_terms">Terms</label>
|
|
1361
1414
|
</div>
|
|
@@ -1371,7 +1424,7 @@ A form-level `layout: :inline` can't be overridden because of the way Bootstrap
|
|
|
1371
1424
|
The `floating` option can be used to enable Bootstrap 5's floating labels. This option is supported on text fields
|
|
1372
1425
|
and dropdowns. Here's an example:
|
|
1373
1426
|
|
|
1374
|
-
|
|
1375
1428
|
```erb
|
|
1376
1429
|
<%= bootstrap_form_for(@user) do |f| %>
|
|
1377
1430
|
<%= f.email_field :email, floating: true %>
|
|
@@ -1419,7 +1472,7 @@ Rails normally wraps fields with validation errors in a `div.field_with_errors`,
|
|
|
1419
1472
|
By default, fields that have validation errors will be outlined in red and the
|
|
1420
1473
|
error will be displayed below the field. Here's an example:
|
|
1421
1474
|
|
|
1422
|
-
|
|
1423
1476
|
```erb
|
|
1424
1477
|
<%= bootstrap_form_for(@user_with_error) do |f| %>
|
|
1425
1478
|
<%= f.email_field :email %>
|
|
@@ -1452,7 +1505,7 @@ Generated HTML:
|
|
|
1452
1505
|
<div class="invalid-feedback">is invalid</div>
|
|
1453
1506
|
</div>
|
|
1454
1507
|
</div>
|
|
1455
|
-
<input
|
|
1508
|
+
<input id="user_preferences" name="user[preferences][]" type="hidden" value="">
|
|
1456
1509
|
<div class="mb-3">
|
|
1457
1510
|
<label class="form-label" for="user_preferences">Preferences</label>
|
|
1458
1511
|
<div class="form-check">
|
|
@@ -1486,7 +1539,7 @@ You can turn off inline errors for the entire form like this:
|
|
|
1486
1539
|
You can also display validation errors in the field's label; just turn
|
|
1487
1540
|
on the `:label_errors` option. Here's an example:
|
|
1488
1541
|
|
|
1489
|
-
|
|
1490
1543
|
```erb
|
|
1491
1544
|
<%= bootstrap_form_for(@user_with_error, label_errors: true) do |f| %>
|
|
1492
1545
|
<%= f.email_field :email %>
|
|
@@ -1519,7 +1572,7 @@ To display an error message with an error summary, you can use the
|
|
|
1519
1572
|
`alert_message` helper. This won't output anything unless a model validation
|
|
1520
1573
|
has failed.
|
|
1521
1574
|
|
|
1522
|
-
|
|
1523
1576
|
```erb
|
|
1524
1577
|
<%= bootstrap_form_for @user_with_error do |f| %>
|
|
1525
1578
|
<%= f.alert_message "Please fix the errors below." %>
|
|
@@ -1543,7 +1596,7 @@ Which outputs:
|
|
|
1543
1596
|
|
|
1544
1597
|
You can turn off the error summary like this:
|
|
1545
1598
|
|
|
1546
|
-
|
|
1547
1600
|
```erb
|
|
1548
1601
|
<%= bootstrap_form_for @user_with_error do |f| %>
|
|
1549
1602
|
<%= f.alert_message "Please fix the errors below.", error_summary: false %>
|
|
@@ -1560,7 +1613,7 @@ This generates:
|
|
|
1560
1613
|
|
|
1561
1614
|
To output a simple unordered list of errors, use the `error_summary` helper.
|
|
1562
1615
|
|
|
1563
|
-
|
|
1564
1617
|
```erb
|
|
1565
1618
|
<%= bootstrap_form_for @user_with_error do |f| %>
|
|
1566
1619
|
<%= f.error_summary %>
|
|
@@ -1583,9 +1636,10 @@ Which outputs:
|
|
|
1583
1636
|
|
|
1584
1637
|
If you want to display a custom inline error for a specific attribute not represented by a form field, use the `errors_on` helper.
|
|
1585
1638
|
|
|
1586
|
-
|
|
1587
1640
|
```erb
|
|
1588
1641
|
<%= bootstrap_form_for @user_with_error do |f| %>
|
|
1642
|
+
<input class="is-invalid" autocomplete="off" disabled type="hidden">
|
|
1589
1643
|
<%= f.errors_on :email %>
|
|
1590
1644
|
<% end %>
|
|
1591
1645
|
```
|
|
@@ -1594,15 +1648,19 @@ Which outputs:
|
|
|
1594
1648
|
|
|
1595
1649
|
```html
|
|
1596
1650
|
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
|
|
1651
|
+
<input autocomplete="off" class="is-invalid" disabled type="hidden">
|
|
1597
1652
|
<div class="invalid-feedback">Email is invalid</div>
|
|
1598
1653
|
</form>
|
|
1599
1654
|
```
|
|
1600
1655
|
|
|
1656
|
+
Note that the `invalid-feedback` `div` is hidden unless there is a preceding element under the same parent that has class `is-invalid`. For the examples, we've artificially added a hidden input.
|
|
1657
|
+
|
|
1601
1658
|
You can hide the attribute name like this:
|
|
1602
1659
|
|
|
1603
|
-
|
|
1604
1661
|
```erb
|
|
1605
1662
|
<%= bootstrap_form_for @user_with_error do |f| %>
|
|
1663
|
+
<input class="is-invalid" autocomplete="off" disabled type="hidden">
|
|
1606
1664
|
<%= f.errors_on :email, hide_attribute_name: true %>
|
|
1607
1665
|
<% end %>
|
|
1608
1666
|
```
|
|
@@ -1611,15 +1669,17 @@ Which outputs:
|
|
|
1611
1669
|
|
|
1612
1670
|
```html
|
|
1613
1671
|
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
|
|
1672
|
+
<input autocomplete="off" class="is-invalid" disabled type="hidden">
|
|
1614
1673
|
<div class="invalid-feedback">is invalid</div>
|
|
1615
1674
|
</form>
|
|
1616
1675
|
```
|
|
1617
1676
|
|
|
1618
1677
|
You can also use a custom class for the wrapping div, like this:
|
|
1619
1678
|
|
|
1620
|
-
|
|
1621
1680
|
```erb
|
|
1622
1681
|
<%= bootstrap_form_for @user_with_error do |f| %>
|
|
1682
|
+
<input class="is-invalid" autocomplete="off" disabled type="hidden">
|
|
1623
1683
|
<%= f.errors_on :email, custom_class: 'custom-error' %>
|
|
1624
1684
|
<% end %>
|
|
1625
1685
|
```
|
|
@@ -1628,10 +1688,13 @@ Which outputs:
|
|
|
1628
1688
|
|
|
1629
1689
|
```html
|
|
1630
1690
|
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
|
|
1691
|
+
<input autocomplete="off" class="is-invalid" disabled type="hidden">
|
|
1631
1692
|
<div class="custom-error">Email is invalid</div>
|
|
1632
1693
|
</form>
|
|
1633
1694
|
```
|
|
1634
1695
|
|
|
1696
|
+
Note that adding the custom class removes the default `invalid-feedback` class. If you still want the default `invalid-feedback` formatting, add it to your `custom_class`es.
|
|
1697
|
+
|
|
1635
1698
|
## Required Fields
|
|
1636
1699
|
|
|
1637
1700
|
A label that is associated with a required field is automatically annotated with
|
|
@@ -1652,7 +1715,7 @@ ActiveModel::Validations::PresenceValidator.
|
|
|
1652
1715
|
|
|
1653
1716
|
In cases where this behaviour is undesirable, use the `required` option to force the class to be present or absent:
|
|
1654
1717
|
|
|
1655
|
-
|
|
1656
1719
|
```erb
|
|
1657
1720
|
<%= f.password_field :login, label: "New Username", required: true %>
|
|
1658
1721
|
<%= f.password_field :password, label: "New Password", required: false %>
|
|
@@ -1675,7 +1738,7 @@ This generates:
|
|
|
1675
1738
|
|
|
1676
1739
|
Adding a form control for a `belongs_to` field will automatically pick up the associated presence validator.
|
|
1677
1740
|
|
|
1678
|
-
|
|
1679
1742
|
```erb
|
|
1680
1743
|
<%= bootstrap_form_for(@address, url: '/address') do |f| %>
|
|
1681
1744
|
<%= f.collection_select :user_id, @users, :id, :email, include_blank: "Select a value" %>
|
|
@@ -1693,7 +1756,7 @@ Generated HTML:
|
|
|
1693
1756
|
<form accept-charset="UTF-8" action="/address" class="new_address" id="new_address_1" method="post">
|
|
1694
1757
|
<div class="mb-3">
|
|
1695
1758
|
<label class="form-label required" for="address_user_id">User</label>
|
|
1696
|
-
<select class="form-select" id="address_user_id" name="address[user_id]">
|
|
1759
|
+
<select class="form-select" id="address_user_id" name="address[user_id]" required="required">
|
|
1697
1760
|
<option value="">Select a value</option>
|
|
1698
1761
|
<option value="">steve@example.com</option>
|
|
1699
1762
|
</select>
|
|
@@ -1703,8 +1766,8 @@ Generated HTML:
|
|
|
1703
1766
|
<input class="form-control" id="address_street" name="address[street]" type="text" value="Foo">
|
|
1704
1767
|
</div>
|
|
1705
1768
|
<div class="mb-3">
|
|
1706
|
-
<label class="form-label" for="address_city">City</label>
|
|
1707
|
-
<input class="form-control" id="address_city" name="address[city]" type="text">
|
|
1769
|
+
<label class="form-label required" for="address_city">City</label>
|
|
1770
|
+
<input class="form-control" id="address_city" name="address[city]" required="required" type="text">
|
|
1708
1771
|
</div>
|
|
1709
1772
|
<div class="mb-3">
|
|
1710
1773
|
<label class="form-label" for="address_state">State</label>
|
|
@@ -1722,14 +1785,14 @@ Generated HTML:
|
|
|
1722
1785
|
|
|
1723
1786
|
Fields can be disabled using the standard Rails form helper option.
|
|
1724
1787
|
|
|
1725
|
-
|
|
1726
1789
|
```erb
|
|
1727
1790
|
<%= bootstrap_form_for @user do |f| %>
|
|
1728
1791
|
<div class="row g-3">
|
|
1729
|
-
<div class="col-auto"><%= f.email_field :email, disabled: true %></div>
|
|
1730
|
-
<div class="col-auto"><%= f.password_field :password, disabled: true %></div>
|
|
1731
|
-
<div class="col-auto"><%= f.text_area :comments, disabled: true %></div>
|
|
1732
|
-
<div class="col-auto"><%= f.text_field :status, disabled: true %></div>
|
|
1792
|
+
<div class="col-auto"><%= f.email_field :email, disabled: true, size: 18 %></div>
|
|
1793
|
+
<div class="col-auto"><%= f.password_field :password, disabled: true, size: 18 %></div>
|
|
1794
|
+
<div class="col-auto"><%= f.text_area :comments, disabled: true, rows: 2, cols: 18 %></div>
|
|
1795
|
+
<div class="col-auto"><%= f.text_field :status, disabled: true, size: 18 %></div>
|
|
1733
1796
|
<div class="col-auto"><%= f.number_field :misc, label: "Number", disabled: true %></div>
|
|
1734
1797
|
<div class="col-auto"><%= f.radio_button :preferences, 1, disabled: true %></div>
|
|
1735
1798
|
<div class="col-auto"><%= f.check_box :terms, disabled: true %></div>
|
|
@@ -1748,26 +1811,26 @@ Generated HTML:
|
|
|
1748
1811
|
<div class="col-auto">
|
|
1749
1812
|
<div class="mb-3">
|
|
1750
1813
|
<label class="form-label required" for="user_email">Email</label>
|
|
1751
|
-
<input class="form-control" disabled id="user_email" name="user[email]" required="required" type="email" value="steve@example.com">
|
|
1814
|
+
<input class="form-control" disabled id="user_email" name="user[email]" required="required" size="18" type="email" value="steve@example.com">
|
|
1752
1815
|
</div>
|
|
1753
1816
|
</div>
|
|
1754
1817
|
<div class="col-auto">
|
|
1755
1818
|
<div class="mb-3">
|
|
1756
1819
|
<label class="form-label" for="user_password">Password</label>
|
|
1757
|
-
<input class="form-control" disabled id="user_password" name="user[password]" type="password">
|
|
1820
|
+
<input class="form-control" disabled id="user_password" name="user[password]" size="18" type="password">
|
|
1758
1821
|
</div>
|
|
1759
1822
|
</div>
|
|
1760
1823
|
<div class="col-auto">
|
|
1761
1824
|
<div class="mb-3">
|
|
1762
1825
|
<label class="form-label" for="user_comments">Comments</label>
|
|
1763
|
-
<textarea class="form-control" disabled id="user_comments" name="user[comments]">
|
|
1826
|
+
<textarea class="form-control" cols="18" disabled id="user_comments" name="user[comments]" rows="2">
|
|
1764
1827
|
</textarea>
|
|
1765
1828
|
</div>
|
|
1766
1829
|
</div>
|
|
1767
1830
|
<div class="col-auto">
|
|
1768
1831
|
<div class="mb-3">
|
|
1769
1832
|
<label class="form-label" for="user_status">Status</label>
|
|
1770
|
-
<input class="form-control" disabled id="user_status" name="user[status]" type="text">
|
|
1833
|
+
<input class="form-control" disabled id="user_status" name="user[status]" size="18" type="text">
|
|
1771
1834
|
</div>
|
|
1772
1835
|
</div>
|
|
1773
1836
|
<div class="col-auto">
|
|
@@ -1784,7 +1847,7 @@ Generated HTML:
|
|
|
1784
1847
|
</div>
|
|
1785
1848
|
<div class="col-auto">
|
|
1786
1849
|
<div class="form-check mb-3">
|
|
1787
|
-
<input
|
|
1850
|
+
<input disabled name="user[terms]" type="hidden" value="0">
|
|
1788
1851
|
<input class="form-check-input" disabled id="user_terms" name="user[terms]" type="checkbox" value="1">
|
|
1789
1852
|
<label class="form-check-label" for="user_terms">Terms</label>
|
|
1790
1853
|
</div>
|