RPF Design System for Rails
x
1
2
3
<div class="rpf-input-field "><label for="search" class="rpf-label">Search<small class="rpf-label__hint">Please enter a search term</small></label>
  <div class="rpf-input-search-container"><input type="search" class="rpf-input rpf-input-search"><button aria-label="Search" class="rpf-button rpf-button--icon-only" type="submit"><span aria-hidden="true" class="rpf-button__icon material-symbols-sharp">search</span></button></div>
</div>
1
render(DesignSystem::Form::SearchInputComponent.new(label:, hint:, disabled:))

Search Input Component

A search input, complete with label, hint. label: nil, hint: nil, error: nil, modifiers: []

Options

  • label: - The field label. If this is blank, the aria-label attribute will be set to 'Search'. (The aria-label can be overriden by passing in a new one if you require a specific one).
  • hint: - Additional text to help the user understand what to enter. Will display below the label in lighter grey text.
  • modifiers: Additional classes to add to the component (gets appended to the end of the base class name on the input field).

e.g.

DesignSystem::Form::SearchInputComponent.new(label: 'Search',
                                   hint: 'Please enter a search term',
                                   class: 'cc-search-input--foo',
                                   modifiers: [:disabled],
                                   data: { event_action: :foo } )

produces:

<div class="rpf-input-field rpf-input-field--disabled">
  <label for="search" class="rpf-label rpf-label--disabled">
    Search
    <small class="rpf-label__hint">Please enter a search term</small>
  </label>
  <div class="rpf-input-search-container">
    <input type="search" disabled="disabled" id="search" data-event-action="foo"
     class="rpf-input rpf-input-search cc-search-input--foo">
    <button onclick="" class="rpf-button rpf-button--disabled rpf-button--icon-only" type="submit">
      <span aria-hidden="true" class="rpf-button__icon material-symbols-sharp">search</span>
    </button>
  </div>
</div>
  • It also accepts all the usual HTML attributes for an input tag, e.g. id, class, data-, value, onclick etc. If you add the onclick attribute, it will be added to the button. All other attributes will be added to the input field.

Consider wrapping the search form in a <search> tag for accessibility.

Param Description Input

—

—

—