RPF Design System for Rails
x
1
2
3
4
5
<form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="1Nj1vjv3nXNXpRnYKEks1QfbyuFBkLLCwXE_7IGubHHoeH_GQsYEILxnoa2uV00hd3s1F_mZ73x4IBvyyhNAJg" autocomplete="off" />
  <div class="rpf-input-field"><label for="sort" class="rpf-label">Sort by<small class="rpf-label__hint">Please select which berry to sort by</small></label><select id="sort" name="sort" 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
4
5
6
7
8
<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_select_input :sort,
    options: options_for_select(%w[blueberry gooseberry raspberry].map{|v| [v.titleize, v]}, selected: selected),
    include_blank: "Please select",
    label: 'Sort by',
    hint: 'Please select which berry to sort by',
    modifiers:, error:, **attrs %>
<% end %>

Select Input Component (without model)

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

This is an example where the select box is not associated with a model. It needs a fuller set of options compared to the with_model example, including if the error is set.

e.g.

f.rpf_select_input :sort,
                   options: options_for_select(%w[blueberry gooseberry raspberry], selected: 'raspberry'),
                   include_blank: "Please select...",
                   label: 'Sort by',
                   hint: 'Please select which berry to sort by'

produces

<div class="rpf-input-field">
  <label for="sort" class="rpf-label">
    Sort by
    <small class="rpf-label__hint">Please select which berry to sort by</small>
  </label>
  <select id="sort" name="sort" 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>

NB: you should specify selected: as part of the options_for_select call if you want to set a default value.

Arguments

  • name The name for the select element
  • 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.
Param Description Input

—

—

The error message to display