RPF Design System for Rails
x
1
<label class="rpf-label">What is your name?<small class="rpf-label__hint">Please enter your first and last names</small></label>
1
2
modifiers = [disabled ? :disabled : nil].compact
render DesignSystem::Form::InputLabelComponent.new(label:, hint:, markdown_hint:, modifiers:)

Input Label Component

Labels are a div container that wraps a label and an optional hint div.

e.g.

DesignSystem::Form::InputLabelComponent.new(label: 'What is your name?',
                                   hint: 'Please enter your first and last names',
                                   markdown_hint: false,
                                   disabled: false)

produces:

<label class="rpf-label">
  What is your name?
  <small class="rpf-label__hint">
    Please enter your first and last names
  </small>
</label>

With markdown_hint set to true:

DesignSystem::Form::InputLabelComponent.new(label: 'What is your name?',
                                   hint: 'Please enter your first and last names',
                                   markdown_hint: false,
                                   disabled: false)
<label class="rpf-label">
  What is your name?
  <small class="rpf-label__hint">
    <div class="rpf-markdown">
      <p>Please enter your first and last names</p>
    </div>
  </small>
</label>

Arguments

  • label [String] the label content
  • hint [String] the hint
  • 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.

NB A label will only show if a label or content is given.

Param Description Input

—

—

—

—