Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Winter updates! We updated and added 8 patterns in the previous quarter.

About

What’s new?

The latest news and updates on the Design System, Forms library and the Content style guide.

Winter 2022-2023

New and updated components

  • Updated the Link - Collection component to add an example of a Section collection.
  • Added SMS option to va-telephone component
  • Added autocomplete prop to va-text-input
  • Tagalog translation added to va-text-input
  • Tagalog translation added to va-accordion
  • Added calendar variation to va-link

Deprecated React components

  • AcceptTerms
  • HelpMenu
  • IconHelp
  • PrivacyAgreement

Sketch Library updates

  • Accordion - Two-line header variation
  • Alert - Action link variation for sign-in/tool prompt alert
  • Link - Calendar variation
  • USWDS upgrade - New symbols for four USWDS components: Radio button, Text input, Memorable date, and US Banner

Documentation updates

September 2022

New and updated components

  • Privacy agreement
  • Translation indicator. Components that have Spanish translation now have a label next to their maturity level at the top of the page (e.g. Accordion).
  • A number of fixes including:
    • Fixed va-checkbox label alignment
    • Added label prop value to va-button in the va-file-input component
    • Fixed month validation utility
    • Aligned web component labels, descriptions, and error message font weights
    • Adjust va-checkbox margin from error-message to label
    • Fixed alert expandable component calc-max-height

Sketch Library updates

Documentation updates

August 2022

New and updated components

Use with caution

Sketch Library updates

Documentation updates

Pattern updates

  • Patterns reorganization. We’ve reorganized the Patterns section around user tasks: Asking a user for information and helping users to accomplish a task. We’ve put in redirects as well so that you can find where your favorite pattern has gone.

July 2022

New and updated components

Use: Deployed

Use with caution

Sketch Library updates

New component symbols:

  • Promo banner
  • Button Pair
  • OMB Info
  • Active link variation
  • File Input
  • Table
  • Alert - expandable (Info and Warning variations)
  • Telephone
  • Decreased form control error state margins to align with USWDS
  • Increased width of error state borders from 2px to 4px for Date input, Memorable date, Number input, Select, Text input, Text area to align with USWDS
  • New layer styles for default, disabled, focus, error, and success borders on form controls

Documentation updates

Pattern updates

June 2022

May 2022

Edit this page in GitHub (Permissions required)
Last updated: Jan 30, 2023