Skip to main content
U.S. flag

An official website of the United States government

  1. Navigate This Design Site
  2. Form

Forms

Forms can use a number of different components in any configuration.

Character Count

This is an input with a character counter.
You can enter up to 25 characters
This is a textarea with a character counter.
You can enter up to 50 characters

Checkbox

Default

Select any historical figure

Tile

Select any historical figure

Combo Box

Date Input

Date of birth For example: 4 28 1986

Date Picker

mm/dd/yyyy

Date Range Picker

mm/dd/yyyy
mm/dd/yyyy
mm/dd/yyyy
mm/dd/yyyy

File Input

Although File Inputs are included as part of the Style Guide, their use is strongly discouraged. File Inputs should only be used on systems configured to handle the many security vulnerabilities that they present.

Select PDF or TXT files
Select any type of image format
Select one or more files
Select any valid file Display a helpful error message

Input Prefix or Suffix

Process List

Default

  1. Start a process

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
    • Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
    • Aliquam erat volutpat. Sed quis velit.

  2. Proceed to the second step

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

  3. Complete the step-by-step process

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

No text and custom sizing

  1. Start a process.

  2. Proceed to the second step.

  3. Complete the step-by-step process.

Custom sizing

  1. Start a process.

    Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.

  2. Proceed to the second step.

    Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

  3. Complete the step-by-step process.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

Range Slider

Step Indicator

Default

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

No labels

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Centered

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Counters

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Small counters

  1. Personal information completed
  2. Household status completed
  3. Supporting documents
  4. Signature not completed
  5. Review and submit not completed

Step 3 of 5 Supporting documents

Text Input

Helpful error message

Time Picker

hh:mm

Validation

Enter a code

Code requirements

  • Use at least one uppercase character
  • Use at least one number

DHS.gov

An official website of the U.S. Department of Homeland Security