RPF Design System for Rails
x
1
2
3
4
5
6
<form class="new_person" id="new_person" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="8WGv2na4KtMvvGOx67eDEvUQg5ThbFqf20jxy0684iTxOpqq_Lbygp7OnK3tPmcV2MX-CIJ6dNxlVxVrndrRwA" autocomplete="off" />
  <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>
    <textarea id="person_name" name="person[name]" placeholder="Rufus T. Firefly" value="Joe Bloggs" class="rpf-input rpf-input-textarea">
Joe Bloggs</textarea>
  </div>
</form>
1
2
3
<%= form_for model, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_textarea_input :name, modifiers:, **options, **attrs %>
<% end %>

Textarea Input Component (with model)

rpf_textarea_input(method_name, label: nil, hint: nil, error: nil, modifiers: [], **attrs)

This is based on DesignSystem::Form::TextareaInputComponent and the same arguments are available in both, e.g. value:, label:, hint:.

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. Label and hint translations are automatically used for those arguments.

e.g.

<%= form_for @person, url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_textarea_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>
  <textarea id="person_name" name="person[name]" value="Joe Bloggs" class="rpf-input rpf-input-textarea">
    Joe Bloggs
  </textarea>
</div>

Arguments

  • 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
  • value: - The value to display in the textarea
  • modifiers: - Additional classes to apply to the text, e.g. :disabled or :'full-width'

It also accepts all the usual HTML attributes for textarea, 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 the hint will not be shown.

Param Description Input

—

—

—

—