RPF Design System for Rails
x
1
2
3
4
5
6
7
8
9
<form class="new_person" id="new_person" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="toJCBOIcgZ0994x2YboxwSZr-YMIDcVHKGEbMtsw6pXAYFAs8LSr5xCHM9VI7-DZ_310CsD5Vh9nq322JuGF5w" autocomplete="off" />
  <fieldset class="rpf-fieldset"><legend class="rpf-label">Sort by<small class="rpf-label__hint">Please select which berry to sort by</small></legend>
    <div class="rpf-fieldset__inputs">
      <label class="rpf-input-checkbox"><input id="person_berry" name="person[berry]" type="checkbox" value="blueberry">Blueberry 🫐</label>
      <label class="rpf-input-checkbox"><input id="person_berry" name="person[berry]" type="checkbox" value="gooseberry">Gooseberry 🥝</label>
      <label class="rpf-input-checkbox"><input id="person_berry" name="person[berry]" type="checkbox" value="raspberry">Raspberry 🍓</label>
    </div>
  </fieldset>
</form>
1
2
3
4
5
6
7
8
<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_fieldset :berry, error:, modifiers:, **attrs do %>
    <%# Iterate through the options and create a checkbox for each %>
    <% I18n.t('helpers.options.person.berry').each do |key, value| %>
      <%= f.rpf_checkbox_input :berry, label: value, checked_value: key, include_hidden: false, error: nil %>
    <% end %>
  <% end %>
<% end %>

Fieldset Component

rpf_fieldset(method_name, label:, hint:, modifiers: nil, **attrs) do
  # inputs go here
end

This is based on DesignSystem::Form::FieldsetComponent and the same options are available in both. It takes a block of content, which is where you should put the input fields.

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.

e.g.

<%= form_for @person, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_fieldset :berry do %>
    <%= f.rpf_radio_input :berry, value: 'raspberry' %>
    <%= f.rpf_radio_input :berry, value: 'gooseberry' %>
  <% end %>
<% end %>

produces:

<!-- form opening tag goes here --->
<fieldset class="rpf-fieldset">
  <legend class="rpf-label">Sort by
    <small class="rpf-label__hint">Please select which berry to sort by</small>
  </legend>
  <div class="rpf-fieldset__inputs">
    <label class="rpf-input-radio">
      <input id="person_berry_raspberry" name="person[berry]" type="radio" checked="checked" value="raspberry">
      Raspberry
    </label>
    <label class="rpf-input-radio">
      <input id="person_berry_gooseberry" name="person[berry]" type="radio" value="gooseberry">
      Gooseberry
    </label>
  </div>
</fieldset>

Options

  • method_name - The method on the model to use for the fieldset, only used to fetch label and hint translations.
  • error: - Any error message to display.
  • label: - The text to display as the fieldset legend.
  • hint: - The text to display as the fieldset hint, within the legend.
  • modifiers: - Additional classes to apply to the text, e.g. :disabled or :'full-width'

Note that the :disabled modifier automatically disables all inputs within the fieldset, without marking them all individually as disabled.

Also note that any error message needs to be specifically added to the component initializers, as it is not determined by the model.

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

Default label and translations

The label is translated using the helpers.label scope, e.g. helpers.label.person.berry. The hint is translated using the helpers.hint scope, e.g. helpers.hint.person.berry. If the translation is not found it will not be shown.

Param Description Input

—

—