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="eJp-60qFTLihYERm0LVONAcTWKJckR5R1v9d_jDgit0iGDGR417lUFtjlsDUhqfbBPgVKO0lkuvKEOG-reUZPA" />
  <div class="rpf-input-field"><label for="person_password" class="rpf-label">What is your password?<small class="rpf-label__hint">Please enter your password</small></label>
    <div class="rpf-input-password__container " data-controller="design-system--form--password-input-component"><input id="person_password" name="person[password]" class="rpf-input rpf-input-password" autocomplete="current-password" type="password" data-design-system--form--password-input-component-target="input"><button aria-label="Password" data-design-system--form--password-input-component-target="toggle" data-action="click->design-system--form--password-input-component#toggleVisibility:prevent" data-show-text="Show" data-hide-text="Hide" class="rpf-button rpf-input-password__button rpf-button rpf-button--tertiary" type="button">Show</button></div>
    <a href="/" class="rpf-link rpf-link--block">Forgot password?</a></div>
</form>
1
2
3
<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_password_input :password, label:, hint:, link_text:, link_href:, show_text:, hide_text:, type:, modifiers:, **attrs %>
<% end %>

RPF Password Input Component (for use with FormBuilder)

rpf_password_input(field_name, label:, hint:, link_text:, modifiers: nil, **attrs)

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

This component requires a Stimulus controller to handle the "Show/Hide" toggle button. See DesignSystem::Form::PasswordInput for guidance.

This component should be used in the design system's form builder context, but otherwise works the same as the standalone component.

<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
   <%= f.rpf_password_input :password, label:, hint:, link_text:, link_href:, type:, modifiers:, **attrs %>
<% end %>

produces:

<!-- form opening tag goes here --->
<div class="rpf-input-field">
  <label for="person_password" class="rpf-label">What is your password?
    <small class="rpf-label__hint">Please enter your password</small>
  </label>
  <div class="rpf-input-password__container ">
    <input type="password" id="person_password" name="person[password]" class="rpf-input rpf-input-password">
    <button
      aria-label="Password"
      class="rpf-button rpf-input-password__button rpf-button rpf-button--tertiary"
      type="submit">
      Hide
    </button>
  </div>
 <a href="/" class="rpf-link rpf-link--block">Forgot password</a>
</div>

Options

  • label: The field label
  • hint:: Additional text to help the user understand what to enter. Will display below the label in lighter grey text.
  • error: An error message. Displays below the input in red text
  • show: Toggle whether to show or hide the password string in the input
  • show_text: Text to display to "Show" the password
  • hide_text: Text to display to "Hide" the password
  • disabled: Disable the component
  • readonly: Set the component to read only
  • link_href: A link to reset the user's password
  • link_text: Text for the password-reset link
  • modifiers: Additional classes to add to the component (gets appended to the end of the base class name on the input field).
Param Description Input

—

—

—

—

—