RPF Design System for Rails
x
1
2
3
4
5
6
<form action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="y5z8S8yEkWPHx82AOSKoyQCfsVefuwzX52EJ2YObx0amDNmDRbj4dB1AiJrEJw0SELRoz8auzsbHPmrEcyJDRw" 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>
    <textarea id="name" name="name" value="Joe Bloggs" class="rpf-input rpf-input-textarea">
Joe Bloggs</textarea>
  </div>
</form>
1
2
3
<%= form_with url: '#', builder: DesignSystem::FormBuilder do |f| %>
  <%= f.rpf_textarea_input :name, label: 'What is your name?', hint: 'Please enter your first and last names', value: 'Joe Bloggs', modifiers:, error:, **attrs %>
<% end %>

Textarea Input Component (without model)

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

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

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

This is based on DesignSystem::Form::TextareaInputComponent and the same arguments 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.

Arguments

  • 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'

It also accepts all the [usual HTML attributes for a textarea)[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes], e.g. id, class, data- etc.

Param Description Input

—

—

—