Skip to main content

Inputs

Input fields collect information from users.

Specifications

There are two sizes of input fields defined:

Default: default form inputs should have a height of 32px (8px padding) and a font-size of 12px (.75rem). Used for most forms.
Large: larger variant should have a height of 48px (8px padding) and a font-size of 14px (.875rem). Used for forms in in-cab applications

	Example
Default	Default Input
Large	Large Input

Behaviors

In Focus Helper Text

Valid Input

Valid Feedback

Invalid Input

Invalid Feedback

Disabled Input

Readonly Input

Editorial

When possible, add helper text below an input to further clarify selections or validation errors.
Always mark required fields with an * .
Provide input constraints, such as a character limit within a text entry box, to provide users with guidelines and improve form efficiency.
Use multi-step forms when necessary by breaking up inputs into distinct categories.
Provide clear and obvious action buttons. Form submission buttons should be primary.