USWDS components are simple and consistent solutions to common user-interface needs.
Find a USWDS component
See the packages section to learn how to import only the components your project needs.
An accordion is a list of headers that hide or reveal additional content when selected.
An alert keeps users informed of important and sometimes time-sensitive changes.
Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.
Breadcrumbs provide secondary navigation to help users understand where they are in a website.
A button group collects similar or related actions.
A button draws attention to important actions with a large selectable surface.
Cards contain content and actions about a single subject.
Character count helps users know how much text they can enter when there is a limit on the number of characters.
Checkboxes allow users to select one or more options from a list.
A collection displays a compact list of multiple related items like articles or events. The list links each item to its original source.
A combo box helps users select an item from a large list of options.
Data visualizations help communicate patterns and relationships in a data set.
A date picker helps users select a single date.
A date range picker helps users select a range between two dates.
File input allows users to attach one or multiple files.
A footer serves site visitors who arrive at the bottom of a page without finding what they want.
A form allows users to enter information into a page.
A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.
An icon list reinforces the meaning and visibility of individual list items with a leading icon.
Icons help communicate meaning, actions, status, or feedback.
The identifier communicates a site’s parent agency and displays agency links required by federal laws and policies.
The in-page navigation allows navigation to specific sections on a lengthy content page
An input mask is a string expression that constrains input to support valid input values.
Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input.
The consistent placement, interface, and behavior of the language selection component allows users to easily find and access content in the language the user is most comfortable in.
A link connects users to a different page or further information.
A list organizes information into discrete sequential sections.
A select for month followed by two text fields is the easiest way for users to enter most dates.
A modal disables page content and focuses the user’s attention on a single task or message.
Pagination is navigation for paginated content.
A process list displays the steps or stages of important instructions or processes.
Format a block of running text.
Radio buttons allow users to select exactly one choice from a group.
A range slider allows users to choose an approximate number from a range.
Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation
A select component allows users to choose one option from a temporary modal menu.
Hierarchical, vertical navigation to place at the side of a page.
A site alert communicates urgent sitewide information.
A step indicator updates users on their progress through a multi-step process.
A summary box highlights key information from a longer page or displays next steps.
A table shows information in columns and rows.
A tag draws attention to new or categorized content elements.
A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.
A time picker helps users select a specific time.
A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.
Government websites need clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. Our default typefaces are designed for legibility and can adapt to a variety of visual tones.
Stating validation requirements up front, with live feedback, means users won’t be left guessing.