How to implement Bootstrap switch for rails form

Question

I have a field in form like this:

= f.check_box :feedback_required, label: "Feedback required?"

Now instead of a checkbox, I want a switch with the label "Feedback required?"

How do I implement this switch in my form:

<div class="custom-control custom-switch">
 <input type="checkbox" class="custom-control-input" id="switch1" name="example">
 <label class="custom-control-label" for="switch1">Toggle me</label>
</div>

Answer 1

This code works with Bootstrap 4.5

<div class="form-group">
  <div class="custom-control custom-switch">
    <%= f.check_box :feedback_required, class: "custom-control-input", id: "feedback_required" %>
    <label class="custom-control-label" for="feedback_required">Feedback required</label>
  </div>
</div>

in haml:

.form-group
  .custom-control.custom-switch
    = f.check_box :feedback_required, class: "custom-control-input", id: "feedback_required"
    %label.custom-control-label{:for => "feedback_required"} Feedback required

Answer 2

it depends what is the field feedback_required, I am guessing in your table your feedback_required is an integer right? So if it's 0 then feedback is false / not required or if it's 1 then feedback is required / true. Or your feedback_required is a boolean and not integer. I am giving both examples here:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switch1" name="example">
  <label class="custom-control-label" for="switch1">Check if you require feedback</label>
   <%= f.check_box :feedback_required, class:"custom-control-input", 
       id: "busy-mode-toggle", 
       checked: current_user.feedback_required ? true : false, 
       type: "checkbox" %>
</div>

This part here checked: current_user.feedback_required ? true : false it really depends on the association of your feedback_required field, is it in the user table, or projects table? You have adjust it accordingly. I used current_user as an example, but yours might be project.feedback_required ? true : false

Or you may be looping through an object that you defined already something like:

x.feedback_required ? true : false