Address Pattern - Country + State/Province/Region - Select and Open Field Swapping

[mtri]

Duplicate check

• I've searched for any related issues and avoided creating a duplicate issue.

This update is for:

Pattern

What is the name?

Addresses page on design.va.gov

What is the nature of this update?

• How to build this component/pattern
• When to use this component/pattern
• When to use something else
• Usability guidance
• Accessibility considerations
• Content considerations
• Implementation
• Package information
• Addition to Forms Library documentation
• Update to existing Forms Library documentation

What problem does this solve?

Addresses

The current documentation does not describe the relationship between the Country select and the State/Province/Region select.

1. The State/Province/Region initial state is an open field.
2. Selecting a country like United states, State/Province/Region becomes a Select box
3. Selecting a country like Afghanistan, State/Province/Region remains an open field.

Under Layout Details State/Province/Region copy says it's a Select box.

In the Mailing address example example this functionality is not obvious unless selecting a country that switches the State/Province/Region to a Select box.

This led to some confusion on the proper implementation when QA-ing an address form implementation.

Clarifying the functionality within the VADS documentation will lead to more consistently designed form comps in Figma as well as more consistent implementation, and smoother a QA process.

Additional Context