RPF Design System for Rails
x
1
<div class="rpf-input-field"><label for="fruit" class="rpf-label">Sort by<small class="rpf-label__hint">Please select which berry to sort by</small></label><select id="fruit" class="rpf-input rpf-input-select"><option value="">Please select</option><option value="blueberry">blueberry</option><option value="raspberry">raspberry</option><option value="gooseberry">gooseberry</option></select></div>
1
2
3
4
5
6
7
modifiers = [readonly ? :readonly : nil,
             disabled ? :disabled : nil,
             full_width ? 'full-width' : nil].compact
error = 'Error: Berry selection is required' if error
options = safe_join(%w[blueberry raspberry gooseberry].map { |v| tag.option(v, value: v) })
render DesignSystem::Form::SelectInputComponent.new(options:, id: :fruit, label:, hint:, include_blank:, modifiers:,
                                                    error:)

Select Input Component

A select input, complete with label, hint and error handling.

e.g.

DesignSystem::Form::SelectInputComponent.new(label: 'Sort by',
                                   hint: 'Please select which berry to sort by',
                                   id: 'sort_by_id',
                                   name: 'sort_by',
                                   options: options_for_select(%w[blueberry raspberry gooseberry])

produces:

<div class="rpf-input-field">
  <div class="rpf-label">
    <label for="sort_by_id">Sort by</label>
    <div class="rpf-label__hint">Please select which berry to sort by</div>
  </div>
  <select class="rpf-input rpf-input-select" id="sort_by_id" name="sort_by">
    <option value="blueberry">blueberry</option>
    <option value="raspberry">raspberry</option>
    <option value="gooseberry">gooseberry</option>
  </select>
</div>

The <options> collection can be passed in as the options attribute, or as a content block.

If the options or content block are blank, the select will not be rendered.

Arguments

  • label [String] the label content
  • hint [String] the hint
  • options [String] The options element that should go insde the select.
  • include_blank [String] Copy to include as a blank option at the top of the select.
  • error [String] Any error message to show.
  • modifiers [Array,String,Symbol] an array of CSS modifiers for the label/input, e.g. disabled
  • attrs [Hash] Other HTML attributes that get included in the input element
Param Description Input

The label content

The hint content

Copy to include as a blank option at the top of the select.

Is the input disabled?

Is the input read only?

Show an error messsage?

Should the input be full-width?