Dummy
x
1
2
3
4
5
6
<form class="usa-form" id="new_text_input_component_preview_article" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="-fYaKSmAkvPG62dJLb5d5JS0juGzqpw6TzzDk2lrM_IISi4LHAfHubCDOJ34JQpUBJAhjYDgG397a22y8qTGHA" autocomplete="off" />
  <div class=''>
    <label class="usa-label" for="text_input_component_preview_article_title">Title</label>
    <input class="usa-input" type="text" name="text_input_component_preview_article[title]" id="text_input_component_preview_article_title" />
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
-# haml-lint:disable LineLength
- article = UswdsComponents::TextInputComponentPreview::Article.new(title: params[:value])
-# haml-lint:enable LineLength
- article.errors.add(:title, params[:error1]) if params[:error1].present?
- article.errors.add(:title, params[:error2]) if params[:error2].present?
= form_for article, url: '#', html: { class: 'usa-form' } do |f|
  = render UswdsComponents::TextInputComponent.new(form: f, attribute: :title,
                                                   hint: params[:hint], success: params[:success])

Text Input Component

See at USWDS

The Text Input Component is designed for a text field in a form backed by an ActiveModel object. In the preview example that is the title attribute of an Article object.

The preview allows you to set error messages on the title attribute. But the component displays the full message of the errors. That is why the attribute name is prepended.

Param Description Input

—

—

—

—

—