RPF Design System for Rails
x
1
2
3
4
5
6
7
<search>
  <form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="5oAVYRxHUBSaWM2VAWScu4gRyMGH2UetOc_yERj_h6NqDFsuUl9siyNhM_xkpkCl40b0hfnwqTv4RDEEut-Zow" autocomplete="off" />
    <div class="rpf-input-field "><label for="search" class="rpf-label">Search<small class="rpf-label__hint">Search for stuff</small></label>
      <div class="rpf-input-search-container"><input type="search" id="search" name="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>
  </form>
</search>
1
2
3
4
5
<search>
  <%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
    <%= f.rpf_search_input :search, label: , hint: , modifiers:, **attrs %>
  <% end %>
</search>

RPF Search Input Component (for use with FormBuilder)

rpf_search_input(field_name, label:, hint:, modifiers: nil, **attrs)

This is based on DesignSystem::Form::SearchInputComponent and the same options are available in both.

This component should be used in the design system's form builder context, but otherwise works the same as the standalone component. You can use it with a model, but there is no intuitive reason for this, so we advice always passing the values in for this component. There is no error handling, as the search field cannot be invalid. We recommend wrapping the search form in a tag

e.g.

<search>
  <%= form_for @person, url: '#', builder: DesignSystem::FormBuilder do |f| %>
    <%= f.rpf_search_input :search_for_stuff, label: 'Search', hint: 'Find stuff' %>
  <% end %>
</search>

produces:

<!-- form opening tag goes here --->
<div class="rpf-input-field ">
  <label for="search_for_stuff" class="rpf-label">
    Search
    <small class="rpf-label__hint">Find stuff</small>
  </label>
  <div class="rpf-input-search-container">
    <input type="search" id="search_for_stuff" name="search_for_stuff" class="rpf-input rpf-input-search">
    <button onclick="" 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>

Options

  • method_name - The name of the method on the model.
  • 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).

  • 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. If you do not add an id, the field_name will be used as the id.

Param Description Input

—

—

—