Skip to content

Commit

Permalink
Merge pull request #2859 from department-of-veterans-affairs/add-curr…
Browse files Browse the repository at this point in the history
…ency-to-text-input

Updates guidance for va-text-input.
  • Loading branch information
humancompanion-usds authored May 22, 2024
2 parents 3c9c327 + a75c9b4 commit 9cf2140
Showing 1 changed file with 16 additions and 6 deletions.
22 changes: 16 additions & 6 deletions src/_components/form/text-input.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ anchors:

{% include storybook-preview.html story="uswds-va-text-input--pattern" link_text="va-text-input Pattern" %}

### Valid Range

{% include storybook-preview.html story="uswds-va-text-input--valid-range" link_text="va-text-input valid range" %}

### Autocomplete

{% include storybook-preview.html story="uswds-va-text-input--autocomplete" link_text="va-text-input Autocomplete" %}
Expand All @@ -44,14 +48,18 @@ Also refer to the overall [form guidance]({{ site.baseurl }}/components/form#hin

{% include storybook-preview.html story="uswds-va-text-input--with-inline-hint-text" link_text="va-text-input with inline Hint text" %}

### With Additional Info
### Additional Info

{% include storybook-preview.html story="uswds-va-text-input--with-additional-info" link_text="va-text-input with Additional info" %}

### With Character count
### Character count

{% include storybook-preview.html story="uswds-va-text-input--with-character-count" link_text="va-text-input with character count" %}

### Currency

{% include storybook-preview.html story="uswds-va-text-input--with-currency" link_text="va-text-input with currency" %}

### Forms pattern - Single

{% include storybook-preview.html story="uswds-va-text-input--forms-pattern-single" link_text="va-text-input forms pattern single" height="500px" %}
Expand Down Expand Up @@ -90,11 +98,13 @@ See [form error handling]({{ site.baseurl }}/components/form/#error-handling) fo

* **Required.** Indicates to the user that the text input field is required in order to submit the form.
* **Pattern.** Allows for a pattern of characters to be required for the text input entry to be valid.
* **Valid range.** Allows for a range of numeric values to be required for the text input entry to be valid.
* **Autocomplete.** Specifies what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
* **With Hint Text.** Provides a short hint to the user on what to enter into the field.
* **With Inline Hint Text.** Provides a very short hint to the user within the label on what to enter into the field. Hint text is preferred to inline hint text.
* **With Additional Info.** Depicts how to use the [additional info component]({{ site.baseurl }}/components/additional-info) within a va-text-input.
* **With Character count.** Implements the [USWDS Character count](https://designsystem.digital.gov/components/character-count/) functionality which displays the character count below the text input. However, our implementation differs from USWDS in that it does not allow for entering more text after the maxlength.
* **Hint Text.** Provides a short hint to the user on what to enter into the field.
* **Inline Hint Text.** Provides a very short hint to the user within the label on what to enter into the field. Hint text is preferred to inline hint text.
* **Additional Info.** Depicts how to use the [additional info component]({{ site.baseurl }}/components/additional-info) within a va-text-input.
* **Character count.** Implements the [USWDS Character count](https://designsystem.digital.gov/components/character-count/) functionality which displays the character count below the text input. However, our implementation differs from USWDS in that it does not allow for entering more text after the maxlength.
* **Currency.** Indicates that the input accepts a dollar amount.
* **Forms pattern - Single.** This variation can be used to support the [One thing per page content principle]({{ site.baseurl }}/patterns/help-users-to/complete-a-sub-task#design-principles) where we gather one decision, question, or piece of information on the page.
* **Forms pattern - Single error.** Shows the error state for the single form field pattern.
* **Forms pattern - Multiple .** This variation also can be used to support the [One thing per page content principle]({{ site.baseurl }}/patterns/help-users-to/complete-a-sub-task#design-principles) where we gather one decision, question, or piece of information on the page.
Expand Down

0 comments on commit 9cf2140

Please sign in to comment.