Simple form change dom output for association

Question

I am using a theme for my website and I am trying to have something like that (not perfect it is how the theme works...):

<div class="input-checkbox input-checkbox--switch">
  <input name="agree" type="checkbox">/</input>
  <label for="checkbox-switch"></label>
</div>
<span>Helper text for checkbox</span>

Currently, I am using simple form like that

= simple_form_for current_user.shop do |f|
  = f.error_notification
  = f.association :services, collection: Service.active.order(:name), as: :check_boxes

And the output is:

<div class="input-checkbox input-checkbox--switch">
  <input class="form-check-input check_boxes optional" type="checkbox" value="7" name="shop[service_ids][]" id="shop_service_ids_7">
  <label class="form-check-label collection_check_boxes" for="shop_service_ids_7">Service 1</label>
</div>

So I need to put the text label after the global wrapper into a span tag and remove the text from the <label> tag.

I tried a lot of things but I am lost with the wrapper, inputs, builders of simple_form

Answer 1

Inspired from Max's answer:

= f.collection_check_boxes :service_ids, @services, :id, :name do |b|
  .input-checkbox.input-checkbox--switch
    = b.check_box
    = label_tag b, '', { for: "shop_service_ids_#{b.value}" }
   %span= b.text