RPF Design System for Rails
x
1
2
3
<form class="new_person" id="new_person" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="9aBZZm02Y5iSi-EWl1PPHcmvmH85K0YSYNGREuHO-BSpESF70f7vdXs7QmcUrxePKYEiZINJvS1txmsiLtaM_A" />
  <label class="rpf-input-checkbox"><input type="hidden" value="0" name="person[likes_cheese]"><input id="person_likes_cheese" name="person[likes_cheese]" type="checkbox" value="1">Do you like cheese?</label>
</form>
1
2
3
<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_checkbox_input :likes_cheese, modifiers:, **attrs %>
<% end %>

Checkbox Input Component (with model)

rpf_checkbox_input(:method_name, label: nil, error: nil,
                                 checked_value: 1, unchecked_value: 0,
                                 include_hidden: false, modifiers: [], **attrs)

This is based on DesignSystem::Form::CheckboxInputComponent and the same arguments are available in both.

This component should be used in a form builder context. It is designed require as little configuration as possible, and works best with a model. The label is picked up from via translations.

e.g.

<%= form_for @person, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_checkbox_input :accepts_terms %>
<% end %>

produces:

<!-- form opening tag goes here --->
<label class="rpf-input-checkbox">
  <input name="person[accepts_terms]" type="hidden" value="0>
  <input id="person_accepts_terms" name="person[accepts_terms]" type="checkbox" value="1">
  Ruby
</label>

NB This checkbox has the same gotchas as Rails and can include a hidden field to ensure that the value is always submitted. This is default behaviour on this component.

Arguments

  • method_name - The name of the method on the model. As with Rails, this is expected to return an integer, a non-zero value causing the box to be checked.
  • label: - The text to display next to the checkbox
  • error: - Any error message to show under the checkbox
  • checked_value: - Set the checked value -- defaults to 1
  • unchecked_value: - Set the unchecked value (if include_hidden is also set) -- defaults to 0
  • include_hidden: - Include the magic extra hidden field, defaults to true
  • modifiers: - Additional classes to apply to the checkbox, e.g. :disabled or :'full-width'

It also accepts all the usual HTML attributes for a checkbox input, e.g. checked, id, class, data- etc.

By default the hidden input is set for the unchecked value, so if the checkbox is unchecked the value will be sent, which is what Rails expects.

Default label and translations

The label is translated using the helpers.label scope, e.g. helpers.label.person.accepts_terms.

Param Description Input

—

—

—