Consistent Styling
We make sure that all inputs have a similar style.
- 1px solid border
- 12px padding
- 12px border-radius
- Left align 16px or 1rem IBM Plex Sans Regular
- 48px height
- 480px max-width
Note: We have a list of preset form components that have additional styling to suit their function. You can view a list of these components and how to use them in the Using Components section.
Larger Tap/ Clickable Area
Input containers should be large enough to click easily. Similarly, they should be large enough to tap with a finger. The average finger pad is 10 mm wide, which is approximately 48px on-screen.
- Give the input container a height of 48px
- Input containers should have a maximum width of 480px.
Form components consist of a series of inputs, list options and buttons. Each input has the following common styling and spacing.
Consistent Sub Components & Spacing
Our form components have a label, help prompt, input container and validation. Each sub-component is spaced to ensure the rhythm of the form remains consistent.
Default Input Spacing
- 4px margin below label
- 4px margin below help prompt
- 40px margin below
Input Spacing with Validation or Character Limit
- 4px margin below label
- 4px margin below help prompt
- 4px margin below input container
- 24px margin below validation/ limit (when present)
Use Width as an Affordance
The width of a field is very important!
Studies show that when an input is longer than what has been entered, the user begins to doubt their answer.
Don’t make inputs span the entire width of the form. When designing form components for our products make sure they are the width of their intended contents.
Max Width
When designing new form components we set a max-width of 480px.
This allows for an optimal number of characters on a line when the input container's font is 16px or 1rem IBM Plex Sans Regular.
This also preserves the appearance of the single-column stack for flow through the inputs and prevents an uneasy laddered appearance.
If the contents of the form component are undetermined then use the full 480px width.
If an input can be smaller than 480px it may also benefit from an input mask.
Mobile Width
On mobile devices with a smaller viewport, every pixel of width is prime real estate.
When adding inputs to mobile UI allow inputs to span the full width of the form container. This also applies to fields with an input mask.
An example of full width inside the form container on mobile.
Input Masks
Use an input mask to help the user better understand what is required from an input. An example would be a phone number or credit card number. It is an extra affordance for the user and increases their chances of successful input.
High Contrast Borders
Use a 1px solid border around all four sides of the input container.
Always use a border color with high contrast to the background. This helps the user identify where they should place their answer.
Our input containers use the input-border design token for border color.
