CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapsimple-formtwitter-bootstrap-4
Camille
Camille

Reputation: 698

Bootstrap 4 custom form with Simple Form

Bootstrap 4 introduces custom forms to customize checkboxes and radio buttons. Here is a way to generate the following templates with Simple Form?

Checkbox: 

<label class="c-input c-checkbox">
  <input type="checkbox">
  <span class="c-indicator"></span>
  Check this custom checkbox
</label>

Radio:

<label class="c-input c-radio">
  <input id="radio1" name="radio" type="radio">
  <span class="c-indicator"></span>
  Toggle this custom radio
</label>
<label class="c-input c-radio">
  <input id="radio2" name="radio" type="radio">
  <span class="c-indicator"></span>
  Or toggle this other custom radio
</label>

Thank you!

Upvotes: 0

Views: 1137

Answers (1)

Vucko
Vucko

Reputation: 20834

Just replace the input with form element:

<%= simple_form_for :foo do |f| %>

  <label class="c-input c-checkbox">
    <%= f.check_box :bar %>

    <span class="c-indicator"></span>
    Check this custom checkbox
  </label>

<% end %>

Which will generate:

<label class="c-input c-checkbox">
  <input name="foo[bar]" type="hidden" value="0">
  <input type="checkbox" value="1" name="foo[bar]" id="foo_bar">
  <span class="c-indicator"></span>
  Check this custom checkbox
</label>

Check the bootply.

Same goes for your second example, just replace the elements with RoR's form elements.

Upvotes: 1

Related Questions