From 5912746e0163e1d151fad1a292464a8dc00677d9 Mon Sep 17 00:00:00 2001 From: Matthew Dingee <52176351+humancompanion-usds@users.noreply.github.com> Date: Wed, 22 May 2024 11:36:00 -0400 Subject: [PATCH] Updates guidance for va-text-input. --- src/_components/form/text-input.md | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/_components/form/text-input.md b/src/_components/form/text-input.md index 0876ab4eb..ea5e058fa 100644 --- a/src/_components/form/text-input.md +++ b/src/_components/form/text-input.md @@ -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" %} @@ -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" %} @@ -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.