RPF Design System for Rails
x
1
2
3
4
<div class="rpf-input-field"><label for="foo" class="rpf-label">What is your name?<small class="rpf-label__hint">Please enter your first and last names</small></label>
  <textarea id="foo" class="rpf-input rpf-input-textarea">
</textarea>
</div>
1
2
3
4
modifiers = [readonly ? :readonly : nil, disabled ? :disabled : nil, full_width ? 'full-width' : nil].compact
error = 'Error: Your name is required' if error
render DesignSystem::Form::TextareaInputComponent.new(id: :foo, label:, hint:, modifiers:, error:)

Textarea Input Component

A fully functional textarea input, complete with label, hint and error handling.

e.g.

DesignSystem::Form::TextareaInputComponent.new(label: 'What is your name?',
                                               hint: 'Please enter your full name',
                                               id: 'name_id',
                                               name: 'name',
                                               value: 'Joe Bloggs'
                                               class: 'cd-textarea-input--foo',
                                               modifiers: [:disabled],
                                               data: { event_action: :foo } )

produces:

<div class="rpf-input-field rpf-input-field--disabled">
  <label for="foo" class="rpf-label rpf-label--disabled">
    What is your name?
    <small class="rpf-label__hint">Please enter your full name</small>
  </label>
  <textarea id="name_id" name="name" disabled="disabled"
            class="rpf-input rpf-input-textarea cd-textarea-input--foo" data-event-action="foo">
   Joe Bloggs
 </textarea>
</div>

Arguments

  • label - The text to display as the fieldset legend
  • hint - The text to display as a hint below the fieldset legend
  • value - The text to display as the default value in the textarea
  • modifiers - Additional classes to apply to the checkbox, e.g. :disabled or :'full-width'

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

The value argument can also be set with a content block.

<%= render DesignSystem::Form::TextareaInputComponent.new(...) do -%>
Joe Bloggs
<% end -%>

NB Be careful of whitespace here, as it is preserved in the display of the textarea value.

Param Description Input

—

—

—

—

—

—