RPF Design System for Rails
x
1
2
3
4
<form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="wza04deJdI4qsZ59RIvMFxIF8Zghj4QYsUXv4ZTQ6TxK7vYfNfZDQvljEeiTkZmlXU2zek4-Z5U6TiNd6ojV2Q" autocomplete="off" />
<label class="rpf-input-checkbox"><input type="hidden" value="0" name="likes_cheese"><input id="likes_cheese" name="likes_cheese" type="checkbox" value="1">
  Do you like <strong>cheese</strong>?
</label></form>
1
2
3
4
5
<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_checkbox_input :likes_cheese, checked:, modifiers:, error:, **attrs do %>
    Do you like <strong>cheese</strong>?
  <% end %>
<% end %>

Checkbox Input Component (without model)

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

This is very similar to the checkbox input component with a model, but instead the first argument is used as the name attribute.

<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_checkbox_input :accepts_terms, label: 'I accept the terms', checked: true, modifiers:, **attrs %>
<% end %>

produces:

<!-- form opening tag goes here --->
<label class="rpf-input-checkbox">
  <input name="accepts_terms" type="hidden" value="0>
  <input id="accepts_terms" name="accepts_terms" type="checkbox" value="1" checked>
  I accept the terms.
</label>

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.

Arguments

  • name - The name in the checkbox input
  • label: - The text to display next to 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
  • error: - Any error message to show under the checkbox
  • 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. id, class, data- etc.

Param Description Input

—

—

—