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="k_YiEzRAKmxeYrPe_u-xxbjtg_ILkP00L16_8p8pNETvnwi9m1lCFiI96FhubysYcxqbxgk3b-jr1RmDMJrPCw" 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
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 |
---|---|---|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|