RPF Design System for Rails
x
1
2
3
4
5
<form class="new_person" id="new_person" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="JAu-K6UWmMh1j8mhP_uRm5KgHsZAj5wiB5eV3MH7oVNsGQGxakHSopZctty4SZA3tpuN8GGOse-4wgx7nVlC7A" autocomplete="off" />
  <div class="rpf-input-field"><label for="person_berry" class="rpf-label">Sort by<small class="rpf-label__hint">Please select which berry to sort by</small></label><select id="person_berry" name="person[berry]" class="rpf-input rpf-input-select"><option value="">Please select</option><option value="blueberry">Blueberry 🫐</option>
      <option value="gooseberry">Gooseberry 🥝</option>
      <option selected="selected" value="raspberry">Raspberry 🍓</option></select></div>
</form>
1
2
3
<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_select_input model_attr, include_blank: "Please select", modifiers:, **attrs %>
<% end %>

Select Input Component

rpf_select_input(:method_name, label: nil, hint: nil, error: nil,
                               options: nil, include_blank: nil, modifiers: nil, **attrs)

This is based on DesignSystem::Form::SelectInputComponent and the same options are used in both.

This creates a select box based on the model's attribute within the form. You do not need to specify label:, hint:, or options: -- they'll get picked up from the translations automatically, if present.

e.g.

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

produces

<!-- form opening tag -->
<div class="rpf-input-field">
  <label for="person_berry" class="rpf-label">
    Sort by
    <small class="rpf-label__hint">Please select which berry to sort by</small>
  </label>
  <select id="person_berry" name="person[berry]" class="rpf-input rpf-input-select">
    <option value="blueberry">Blueberry 🫐</option>
    <option value="gooseberry">Gooseberry 🥝</option>
    <option selected="selected" value="raspberry">Raspberry 🍓</option>
  </select>
</div>

You do not need to explicity set errors on the attribute -- these will automatically get picked up.

Finally, you can specify selected: to set a default selected option other than the value of the attribute in the model.

If no options are found, or provided, the select box will not be rendered.

Arguments

  • method_name The name of the attribute on the model.
  • label: The label for the input. If not provided, it will be looked up in the translations.
  • hint: The hint for the input. If not provided, it will be looked up in the translations.
  • error: The error message for the input. This will be shown if the model has errors.
  • options: The options for the select box. If not provided, it will be looked up in the translations.
  • include_blank: The text for the blank option.
  • modifiers: Any additional classes to add to the input.
  • **attrs Any additional attributes to add to the input.

Translations

The translations should be structured like this:

en:
 helpers:
   label:
     person:
      berry: "Sort by"
   hint:
      person:
        berry: "Please select which berry to sort by"
   options:
     person:
       berry:
         raspberry: "Raspberry 🍓"
         blueberry: "Blueberry 🫐"
         gooseberry: "Gooseberry 🥝"
Param Description Input

The default selected value

Is the input disabled?

Is the input read-only?

Show a validation error