RPF Design System for Rails
x
1
2
3
<div class="rpf-input-field"><label for="name" 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="name" 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>
1
2
3
4
5
6
7
8
9
10
11
label = 'What is your password?'
hint = 'Please enter your password'
link_text = 'Forgot password?'
modifiers = [readonly ? :readonly : nil, disabled ? :disabled : nil, full_width ? :'full-width' : nil].compact
error = 'Error: Your password is required' if error
type = show ? 'text' : 'password'
render DesignSystem::Form::PasswordInputComponent.new(
  label:, hint:, modifiers:, error:, id: :name,
  type:, link_text:,
  show_text: 'Show', hide_text: 'Hide', link_href: '/'
)

Password Input Component

<%= f.rpf_password_input(
  :password,
  label:, hint:, link_text:, link_href:,
  show_text:, hide_text:, type:, modifiers:,
  **attrs
) %>

The standard form password input.

This component requires a Stimulus controller to handle the "Show/Hide" toggle button. To avoid loading Stimulus controllers that your application doesn't use, you must explicitly add this controller to your importmap in your application.

You must also have importmap-rails and stimulus-rails installed and configured in your application.

Add the following to your config/importmap.rb file:

pin "controllers/design_system/form/password_input_component_controller"

All user-facing strings (label, hint, link text, show/hide, error) are customisable and should be supplied from i18n translations.

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 on the input, e.g. :disabled, :readonly, or :'full-width' (:'full-width' also makes the password field container full width).
Param Description Input

—

—

—

—

—