Components

USWDS components are simple and consistent solutions to common user interface needs.

Find a USWDS component

43 components found

See the packages section to learn about how to import only the components your project needs.

  • Accordion

    An accordion is a list of headers that hide or reveal additional content when selected.

  • Alert

    An alert keeps users informed of important and sometimes time-sensitive changes.

  • Banner

    The banner identifies official websites of government organizations in the United States. It also helps visitors understand how to tell that a website is both official and secure.

  • Breadcrumb

    Breadcrumbs provide secondary navigation to help users understand where they are in a website.

  • Button group

    A button group collects similar or related actions.

  • Button

    A button draws attention to important actions with a large selectable surface.

  • Card

    Cards contain content and actions about a single subject.

  • Character count

    Character count helps users know how much text they can enter when there is a limit on the number of characters.

  • Checkbox

    Checkboxes allow users to select one or more options from a list.

  • Collection

    A collection displays a compact list of multiple related items like articles or events. The list links each item to its original source.

  • Combo box

    A combo box helps users select an item from a large list of options.

  • Data visualizations

    Data visualizations help communicate patterns and relationships in a data set.

  • Date input

    Three text fields are the easiest way for users to enter most dates.

  • Date picker

    A date picker helps users select a single date.

  • Date range picker

    A date range picker helps users select a range between two dates.

  • Dropdown

    A dropdown allow users to select one option from a temporary modal menu.

  • File input

    File input allows users to attach one or multiple files.

  • Footer

    A footer serves site visitors who arrive at the bottom of a page without finding what they want.

  • Form

    A form allows users to enter information into a page.

  • Header

    A header helps users identify where they are and provide a quick, organized way to reach the main sections of a website.

  • Icon list

    An icon list reinforces the meaning and visibility of individual list items with a leading icon.

  • Icon

    Icons help communicate meaning, actions, status, or feedback.

  • Identifier

    The identifier communicates a site’s parent agency and displays agency links required by federal laws and policies.

  • Input prefix or suffix

    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.

  • Link

    A link connects users to a different page or further information.

  • List

    A list organizes information into discrete sequential sections.

  • Modal

    A modal disables page content and focuses the user’s attention on a single task or message.

  • Process list

    A process list displays the steps or stages of important instructions or processes.

  • Prose

    Format a block of running text.

  • Radio buttons

    Radio buttons allow users to select exactly one choice from a group.

  • Range slider

    A range slider allows users to choose an approximate number from a range.

  • Search

    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

  • Side navigation

    Hierarchical, vertical navigation to place at the side of a page.

  • Site alert

    A site alert communicates urgent sitewide information.

  • Step indicator

    A step indicator updates users on their progress through a multi-step process.

  • Summary box

    A summary box highlights key information from a longer page or displays next steps.

  • Table

    A table shows information in columns and rows.

  • Tag

    A tag draws attention to new or categorized content elements.

  • Text input

    A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.

  • Time picker

    A time picker helps users select a specific time.

  • Tooltip

    A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.

  • Typography

    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.

  • Validation

    Stating validation requirements up front, with live feedback, means users won’t be left guessing.