# Forms

Capture user input to save and validate.

# Design Best Practices

Do

Avoid

Don't

# Placeholder Text

Do

Avoid

Don't

# Accessibility

Check out the accessible error pattern

Check out the accessible error pattern

Learn our best practices for combining form elements.

# Layout & Spacing

# Form Elements

Looking for a fully baked form example?

Looking for a fully baked form example?

Check out the basic form recipe!
Input Container
Input Container
Provides layout and styling of inputs
Input Group
Input Group
Provides content before or after a form control
Text Input
Text Input
Allows a user to enter text
Text Area Input
Text Area Input
Allows a user to enter text that could take up multiple lines
Checkbox Input
Checkbox Input
Allows a user to select or unselect a value
Radio Input
Radio Input
Allows a user to select an option from a group
Select Input
Select Input
Allows a user to select a single value from a list of options
Single-select Input (with autocomplete)
Single-select Input (with autocomplete)
Allows users to select a single value from a predefined list of options, with the ability to filter the list of options.
Multi-select Input (with autocomplete)
Multi-select Input (with autocomplete)
Allows users to select multiple items from a predefined list, with the ability to filter the list of options.
File Drop Zone
File Drop Zone
An interface for accepting files
File Uploader
File Uploader
An uploader with a responsive file management interface and error handling
Toggles
Toggles
Switches between two states
Radio Toggle Bars
Radio Toggle Bars
Allows a user to select one option from two or more options in a group to trigger an immediate change in their user interface