Added examples for check box /radio button collections with inline errors to the README.md

Fixes bootstrap-ruby#655

Author: donv

README.md

@@ -1423,6 +1423,8 @@ error will be displayed below the field. Here's an example:
 ```erb
 <%= bootstrap_form_for(@user_with_error) do |f| %>
  <%= f.email_field :email %>
+ <%= f.collection_radio_buttons :misc, Skill.all, :id, :name %>
+ <%= f.collection_check_boxes :preferences, [[1, 'Good'], [2, 'Bad']], :first, :second %>
  <%= f.fields_for :address do |af| %>
  <%= af.text_field :street %>
  <% end %>
@@ -1438,6 +1440,31 @@ Generated HTML:
  <input class="form-control is-invalid" id="user_email" name="user[email]" required="required" type="email" value="steve.example.com">
  <div class="invalid-feedback">is invalid</div>
  </div>
+ <div class="mb-3">
+ <label class="form-label" for="user_misc">Misc</label>
+ <div class="form-check">
+ <input checked class="form-check-input is-invalid" id="user_misc_1" name="user[misc]" type="radio" value="1">
+ <label class="form-check-label" for="user_misc_1">Mind reading</label>
+ </div>
+ <div class="form-check">
+ <input class="form-check-input is-invalid" id="user_misc_2" name="user[misc]" type="radio" value="2">
+ <label class="form-check-label" for="user_misc_2">Farming</label>
+ <div class="invalid-feedback">is invalid</div>
+ </div>
+ </div>
+ <input autocomplete="off" id="user_preferences" name="user[preferences][]" type="hidden" value="">
+ <div class="mb-3">
+ <label class="form-label" for="user_preferences">Preferences</label>
+ <div class="form-check">
+ <input checked class="form-check-input is-invalid" id="user_preferences_1" name="user[preferences][]" type="checkbox" value="1">
+ <label class="form-check-label" for="user_preferences_1">Good</label>
+ </div>
+ <div class="form-check">
+ <input class="form-check-input is-invalid" id="user_preferences_2" name="user[preferences][]" type="checkbox" value="2">
+ <label class="form-check-label" for="user_preferences_2">Bad</label>
+ <div class="invalid-feedback">is invalid</div>
+ </div>
+ </div>
  <div class="mb-3">
  <label class="form-label" for="user_address_attributes_street">Street</label>
  <input class="form-control is-invalid" id="user_address_attributes_street" name="user[address_attributes][street]" type="text" value="Bar">
@@ -1508,6 +1535,7 @@ Which outputs:
  <ul class="rails-bootstrap-forms-error-summary">
  <li>Email is invalid</li>
  <li>Misc is invalid</li>
+ <li>Preferences is invalid</li>
  </ul>
  </div>
 </form>
@@ -1546,6 +1574,7 @@ Which outputs:
  <ul class="rails-bootstrap-forms-error-summary">
  <li>Email is invalid</li>
  <li>Misc is invalid</li>
+ <li>Preferences is invalid</li>
  </ul>
 </form>
 ```

demo/app/assets/stylesheets/application.scss

@@ -1,6 +1,17 @@
 // @import "actiontext";
 
 label.required:after {
- content:" *";
+ content: " *";
  color: red;
 }
+
+.fragment {
+ @extend .border;
+ @extend .p-3;
+}
+
+form, .alert, .fragment {
+ > :last-child {
+ margin-bottom: 0 !important;
+ }
+}

demo/app/controllers/bootstrap_controller.rb

@@ -6,7 +6,7 @@ def form
  def fragment
  @erb = params[:erb]
 
- @erb.prepend '<div class="p-3 border">'
+ @erb.prepend '<div class="fragment">'
  @erb << "</div>"
  load_models
  render inline: @erb, layout: "application" # rubocop: disable Rails/RenderInline
@@ -20,9 +20,10 @@ def load_models
  @address_with_error.errors.add(:street)
  @collection = [@address, @address_with_error]
  @user = User.new email: "steve@example.com"
- @user_with_error = User.new email: "steve.example.com", address: @address_with_error
+ @user_with_error = User.new email: "steve.example.com", address: @address_with_error, misc: 1, preferences: [1]
  @user_with_error.errors.add(:email)
  @user_with_error.errors.add(:misc)
+ @user_with_error.errors.add(:preferences)
  @users = [@user]
  end
 end

demo/app/models/user.rb

@@ -1,11 +1,7 @@
 class User < ApplicationRecord
  attr_accessor :remember_me
 
- if Rails::VERSION::STRING >= "6.1"
- serialize :preferences, coder: JSON
- else
- serialize :preferences, JSON
- end
+ serialize :preferences, coder: JSON
 
  validates :email, presence: true, length: { minimum: 5 }
  validates :terms, acceptance: { accept: true }