Components
Memorable date
Use with caution: Available English, Spanish
USWDS v3
Three text fields are the easiest way for users to enter most dates.
Examples - v3
Default
View va-memorable-date in Storybook
View va-memorable-date in StorybookMonth select
View va-memorable-date with month select in Storybook
Extra hint text
View va-memorable-date with extra hint text in Storybook
Custom validation
View va-memorable-date with custom validation in Storybook
Forms pattern single default
View va-memorable-date forms pattern single default in Storybook
Forms pattern multiple
View va-memorable-date forms pattern multiple in Storybook
Error
View va-memorable-date error in Storybook
Error with month select
View va-memorable-date error with month select in Storybook
Forms pattern single error
View va-memorable-date forms pattern single error in Storybook
Forms pattern multiple error
View va-memorable-date forms pattern multiple error in Storybook
Internationalization
View va-memorable-date internationalization in Storybook
Examples - v1
Default
View va-memorable-date v1 along with additional variations in Storybook
Usage
Refer to the U.S. Web Design System for usage guidance
Choosing between variations
- The v3 version of this component uses a select element instead of a text input for the month. This was done after research conducted by the USWDS team. Teams should note the maturity of this component and proceed with caution.
Code usage
Attributes and Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
enableAnalytics |
enable-analytics |
boolean |
false |
Whether or not an analytics event will be fired. |
error |
error |
string |
The error message to render (if any) This prop should be leveraged to display any custom validations needed for this component | |
formHeading |
form-heading |
string |
The content of the heading if `useFormsPattern` and `uswds` are true. | |
formHeadingLevel |
form-heading-level |
number |
3 |
The heading level for the heading if `useFormsPattern` and `uswds` are true. |
hint |
hint |
string |
Hint text string | |
invalidDay |
invalid-day |
boolean |
false |
|
invalidMonth |
invalid-month |
boolean |
false |
|
invalidYear |
invalid-year |
boolean |
false |
|
label |
label |
string |
Label for the field. | |
monthSelect |
month-select |
boolean |
false |
Whether or not to use the month as an input or select. |
name |
name |
string |
Used to create unique name attributes for each input. | |
required |
required |
boolean |
false |
Render marker indicating field is required. |
useFormsPattern |
use-forms-pattern |
string |
Enabling this will add a heading and description for integrating into the forms pattern. Accepts `single` or `multiple` to indicate if the form is a single input or will have multiple inputs. `uswds` should be true. | |
uswds |
uswds |
boolean |
true |
Whether or not the component will use USWDS v3 styling. |
value |
value |
string |
Set the default date value must be in YYYY-MM-DD format. |
Events
| Name | Description |
|---|---|
component-library-analytics |
The event used to track usage of the component. This is emitted when an input value changes and enableAnalytics is true. |
dateBlur |
Fires when the date input loses focus |
dateChange |
Fires when the date input loses focus after its value was changed |
Accessibility considerations
Refer to the U.S. Web Design System for accessibility guidance
Component checklist
Maturity
- Guidance
- Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
- Research
- VFS team conducted research on this component which is linked from this page.
- Stability
- Component has been in production for more than 3 months with no significant issues found.
- Adoption
- Multiple teams have adopted this component.
- Note: This component was introduced in August 2022.
Accessibility
- Accessible use of color
- Color is not used as the only visual means of conveying information (WCAG 2.2 1.4.1).
- Accessible contrast
- Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.2 1.4.3). Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.2 1.4.11).
- Keyboard interactions
- Follows WCAG 2.2 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions. All interactive elements can be selected and activated using the keyboard.
- Content zoom tested
- Component has been tested with the display set to 400% at 1280px viewport width to ensure that the component does not have overlapping text or elements and all interactive elements still operate.
- Tested in screen readers
- Tested with screen readers to ensure there are no issues with reading order, spelling, dynamic content, and interactive elements.
Code assets
- Variations
- Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component depicted in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
- Internationalization
- Describes i18n attributes.
Visual assets
- Variations
- Sketch library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component designed to work in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
86% complete (13 of 15)
Legend:
- Complete
- Incomplete
- Not applicable