Components
Memorable date
Use with caution: Available English, Spanish USWDS v3Examples
Default
View va-memorable-date in Storybook
Month 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
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.
Errors
- Refer to the specific error examples above.
View form error handling for additional guidance
Hint text
- Refer to the hint text example above.
View label hint text for additional guidance
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`. | |
formHeadingLevel |
form-heading-level |
number |
3 |
The heading level for the heading if `useFormsPattern`. |
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. | |
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.
Legend:
- Complete
- Incomplete
- Not applicable