RPF Design System for Rails
x
1
2
3
<form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="tK7wogcQzranxw13nJK5ZFMayj_gOubf2eJqfUHo_lyw7nh4Mo3RAZz0l7CvOGIUmB3hH3CI6i7kiTeRibGfdQ" autocomplete="off" />
  <div class="rpf-input-field"><label for="name" class="rpf-label">What is your name?<small class="rpf-label__hint">Please enter your first and last names</small></label><input id="name" name="name" placeholder="Rufus T. Firefly" value="Joe Bloggs" type="text" markdown_hint="false" class="rpf-input rpf-input-text"></div>
</form>
1
2
3
<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_text_input :name, label: 'What is your name?', hint: 'Please enter your first and last names', value: 'Joe Bloggs', placeholder: 'Rufus T. Firefly', modifiers:, markdown_hint:, error:, **attrs %>
<% end %>

Text Input Component (without model)

rpf_text_input(name, label:, hint:, error:,
               modifiers: nil, markdown_hint:, **attrs)

This is very similar to the text input component with a model, but instead the first option is used as the name attribute.

<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_text_input :name, label: 'What is your name?',
                              hint: 'Please enter your first and last names',
                              value: 'Joe Bloggs' %>
<% end %>

produces:

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

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

By default the hidden input is set for the unchecked value, so if the text is unchecked the value will be sent, which is what Rails expects.

Options

  • name - The name in the text input
  • label: - The text to display next to the text
  • hint: - The text to display next to the text
  • error: - The error message to display
  • 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.

Param Description Input

—

—

—

—