RPF Design System for Rails
x
1
<label class="rpf-input-checkbox"><input name="language" type="checkbox" value="1">Ruby</label>
1
2
3
4
5
6
7
8
9
modifiers = [disabled ? :disabled : nil, full_width ? :'full-width' : nil].compact
error = 'Error: You must check the box' if error
render DesignSystem::Form::CheckboxInputComponent.new(name: :language,
                                                      checked: false,
                                                      label:,
                                                      modifiers:,
                                                      error:,
                                                      include_hidden:)

Checkbox Input Component

DesignSystem::Form::CheckboxInputComponent.new(label: 'Ruby', name: 'ruby',
                                               checked: true, checked_value: '1', unchecked_value: '0',
                                               include_hidden: true, modifiers: [])

A single checkbox input, complete with label.

e.g.

DesignSystem::Form::CheckboxInputComponent.new(label: 'Ruby', name: 'ruby')

produces:

<label class="rpf-input-checkbox">
  <input name="ruby" 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. But this is not default behaviour on this component.

Arguments

  • label - The text to display next to the checkbox
  • checked - Set the checked state
  • 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
  • modifiers - Additional classes to apply to the checkbox, e.g. :disabled or :'full-width'
  • error - Set an error message to display below the checkbox.

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

The label can also be given as a block, allowing for more complex content:

<%= DesignSystem::Form::CheckboxInputComponent.new(name: 'ruby') do %>
 <strong>Some different</strong> label text.
<% end %>

If no label is given, the checkbox will not be rendered.

Param Description Input

—

—

—

—

—