You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
***When you need to collect a person's Social Security or VA file number.** For example, for an application for identity purposes.
26
+
***When you need to collect or display a person's Social Security or VA file number.** For example, for an application for identity purposes.
26
27
27
28
## Examples
28
29
30
+
### Collect
31
+
29
32
{% include component-example.html alt="Shows the form fields used to obtain Social Security number and VA file number." file="/images/patterns/ask-users-for/social-security-number/form-ssn.png" caption="Example of asking for a Social security or VA file number." class="x2" %}
{% include component-example.html alt="Example of a prefilled Social Security number with a label that reads Last four digits of Social Security number' followed by the numbers 6784." file="/images/patterns/ask-users-for/social-security-number/card-ssn.png" caption="Example of a prefilled Social Security number." class="x2" %}
41
+
35
42
## How to design and build
36
43
37
44
### How this pattern works
@@ -42,28 +49,48 @@ A VA file number is how a Veteran’s claim is tracked through the compensation
42
49
43
50
***Use the [web-component-patterns/ssnPattern in the Forms Library]( {{ page.code-link }}).**
44
51
45
-
The ssnPattern implements the following:
52
+
The ssnPattern implements the following best practices:
46
53
47
-
***Use a single text input for each field.**
54
+
***Prefill Social Security number when possible.** Don't ask users to input their SSN if you can prefill it instead.
55
+
***Use a single text input for each field.** Don't split the SSN into 3 text inputs.
48
56
***Do not abbreviate.** Use ‘Social Security number’. Do not use abbreviations, such as SSN.
49
57
***When asking for both Social Security and VA file numbers, one or the other may be provided.** VA file numbers are not on every form.If the form asks for a Social Security number and VA file number make sure to note in the VA file number label or helper text, "must have this or a Social Security number".
50
-
***Give user flexibility in entering their Social Security number.** A user can enter the Social Security number however they like: with spaces, without spaces, dashes, or without dashes. When the user enters their number and the input loses focus, the number will appear masked with dashes.
58
+
***Give user flexibility in entering their Social Security number.** A user can enter the Social Security number however they like: with spaces, without spaces, dashes, or without dashes. When the user enters their number and the input loses focus, the number will appear masked with dashes.
51
59
***Validate Social Security numbers.** See [content considerations](#content-considerations) for the appropriate validation messages.
[ssnPattern is a web-component pattern available in the Forms library]({{ page.code-link }}).
77
+
[ssnPattern is a web component driven pattern available in the Forms library]({{ page.code-link }}).
78
+
79
+
[formatNumberForScreenReader is a utility function available in the Forms library]({{ page.code-link-mask-string }}). This utility function can be used to format a number for screen readers, such as a Social Security number when it is prefilled.
0 commit comments