Bootstrap and Rails' collection_check

Per the Bootstrap 5 documentation, the label needs to be after the checkbox tag to create button-like checkboxes or radios. Taken directly from the documentation

Any suggestions on how to reduce the code and use the collection_check_boxes instead?

Here's an updated code after the person's answer below:

%fieldset.border.border-dark.p-2.mb-4
        %legend Pronouns
        .row.mb-4
            = f.collection_check_boxes :pronouns, pronoun_list, :itself, :itself, {include_hidden: false} do |b|
                .col-md-4.d-grid.d-block.mb-2
                    = b.check_box(class: "btn-check")
                    = b.label(:"data-value" => b.value, class: "btn btn-outline-dark text-start btn-lg") 

        .form-group.mb-4
            = f.label :pronouns_other, "Other Pronouns"
            = f.text_field :pronouns_other, class: "form-control border border-dark"

CodePudding user response：

I belive you copied the example from the documentation which is intended to show how you would place the checkbox inside the label element. If thats not what you want then don't put the checkbox inside the block:

= f.collection_check_boxes :pronouns, pronoun_list, :first, :last do |b|
  .col-md-4.d-grid.mb-3.d-block
    = b.label(:"data-value" => b.value, class: "btn btn-outline-primary btn-lg mb-2 w-25") 
    = b.check_box(class: "btn-check")

Also since the pairs in the array are identical you can just use a normal array and the Object#itself method:

= f.collection_check_boxes :pronouns, pronoun_list, :itself, :itself do |b|
  .col-md-4.d-grid.mb-3.d-block
    = b.label(:"data-value" => b.value, class: "btn btn-outline-primary btn-lg mb-2 w-25") 
    = b.check_box(class: "btn-check")

def pronoun_list
  [
    "He/Him/His",                                                                                                           
    "She/Her/Hers",                                                                                                         
    "They/Them/Their",                                                                                                      
    "Zie/Zim/Zir",                                                                                                          
    "Sie/Sie/Hir",                                                                                                          
    "Ey/Em/Eir",                                                                                                            
    "Ve/Ver/Vis",                                                                                                           
    "Tey/Ter/Tem",                                                                                                          
    "E/Em/Eir",                                                                                                             
    "Prefer not to disclose"
  ] 
end