RPF Design System for Rails
x
1
<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" value="Joe Bloggs" type="text" markdown_hint="false" class="rpf-input rpf-input-text"></div>
1
2
3
4
5
modifiers = [readonly ? :readonly : nil, disabled ? :disabled : nil, full_width ? 'full-width' : nil].compact
error = 'Error: Your name is required' if error
render DesignSystem::Form::TextInputComponent.new(label:, hint:, markdown_hint:, modifiers:, error:, id: :name,
                                                  value: 'Joe Bloggs')

Text Input Component

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

e.g.

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

produces:

<div class="rpf-input-field">
  <div class="rpf-label rpf-label--disabled">
    <label for="name_id">What is your name?</label>
    <div class="rpf-label__hint">Please enter your first and last names</div>
  </div>
  <input disabled="disable" id="name_id" name="name" value="Joe Bloggs"
  type="text" class="rpf-input rpf-input-text cd-text-input--foo">
</div>

Arguments

  • label [String] the label content
  • hint [String] the hint
  • id [String] the id attribute for the input element
  • name [String] the name attribute for the input element
  • value [String] the value attribute for the input element
  • class [String] the class attribute for the input element
  • modifiers [Array,String,Symbol] an array of CSS modifiers for the label/input, e.g. disabled
  • data [Hash] Other data attributes that get included in the input element
  • markdown_hint [Boolean] to render the hint as markdown or not

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

Param Description Input

—

—

—

—

—

—

—