Text Input Component (with model)

rpf_text_input(method_name, label:, hint:, checked: false,
               modifiers: nil, markdown_hint: false, **attrs)

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

This component should be used in a form builder context. It is designed require as little configuration as possible, and works best with a model.

e.g.

<%= form_for @person, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_text_input :name %>
<% end %>

produces:

<!-- form opening tag goes here --->
<div class="rpf-input-field">
  <label for="person_name" class="rpf-label">
    What is your name?
    <small class="rpf-label__hint">
      Please enter your first and last names
    </small>
  </label>
  <input id="person_name" name="person[name]" value="Joe Bloggs" type="text" class="rpf-input rpf-input-text">
</div>

with markdown_hint set to true, it produces:

<!-- form opening tag goes here --->
<div class="rpf-input-field">
  <label for="person_name" class="rpf-label">
    What is your name?
    <small class="rpf-label__hint">
      <div class="rpf-markdown">
        <p>Please enter your first and last names</p>
      </div>
    </small>
  </label>
  <input id="person_name" name="person[name]" value="Joe Bloggs" type="text" markdown_hint="true" class="rpf-input rpf-input-text"> # rubocop:disable Layout/LineLength
</div>

Options

• method_name - The name of the method on the model.
• label: - The text to display next to the text
• hint: - The text to display next to the text
• modifiers: - Additional classes to apply to the text, e.g. :disabled or :'full-width'
• markdown_hint - A boolean to determine if the hint should be rendered as markdown

NB The markdown_hint attribute is a temporary fix to render markdown in the hint.

It also accepts all the usual HTML attributes for a text input, e.g. id, class, data- etc.

Default label and translations

The label is translated using the helpers.label scope, e.g. helpers.label.person.name. The hint is translated using the helpers.hint scope, e.g. helpers.hint.person.name. If the translation is not found it will not be shown. The placeholder is translated using the helpers.placeholder scope, e.g. helpers.placeholder.person.name. Similar to the hint, if the translation is not found the placeholder will not be shown.