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.
25 characters allowed
This is a textarea with a character counter.
50 characters allowed

Checkbox

Default

Select any historical figure

Tile

Select any historical figure

Combo Box

 
When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.

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
 
When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.

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