Forms: text input
- Text inputs allow users to enter information.
- Text inputs can be accompanied by information pop-ups (naming) and error messages.
- Please see the form template to get started with creating your own forms and error messages.
- At its core, a text input consists of a label and the input field/text area.
- A text input also consists of an information icon and accordion, an inline error message and help text.
There are 2 types of labels.
There are 2 types of input fields.
- For short text inputs that do not go past one line
- For desktop there are 6 widths to choose from
- For mobile there are 2 widths to choose from
- Each variation has a focused/active state as well
Desktop text input fields
Mobile text input fields
- For longer text inputs that go past one line
- For desktop there are 3 widths to choose from
- For mobile there is 1 width only
- Each variation has a focused/active state as well
Desktop text area fields
Mobile text area fields
- In forms or dialogs
- Anywhere a user would need to type in information
- On desktop, labels can span 8 columns long (~60 characters with no spaces) or less, regardless of the width of the input field
- Help text can be used to assist users and should be kept to two sentences or less.
- Select an input field width based on the estimated length of the user's response (the input field width provides a hint to users as to how much text to write)
- For desktop input widths spanning 4, 5, or 6 columns, use 2 columns on mobile
- For desktop input widths spanning 1, 2, or 3 columns, use 1 column on mobile
- When a user needs to write paragraphs of text, use a text area field
- Use one input field (rather than multiple fields) for numbers that have multiple sections (e.g., phone numbers, Social Security Numbers, or credit card numbers)
- Use a horizontal layout (a single column) for your text input fields so users can read the form in a straight line down the page
- The exception to this is when using 2 smaller width input fields that are related to each other, such as credit card expiry date and security code
- For text fields (one-line fields), the text in the field can be removed by deleting the text, rather than deleting the text layer
- For text areas (multi-line fields), the text in the field can be hidden by changing the text color to white
- Don't delete the text, as the size of the input area will decrease as well
- For text areas, the text field contains 400 characters without spacing - this can be adjusted to your needs by replacing the text with the desired amount of characters
- The colours used in the input field component should not be changed (except for the input text changing to white to hide it, as mentioned above)
- When adding a label with a long character count, you can break up the text into 2+ lines by hitting the enter key
.png)
.png)
We added the text input component to the Extended GC Design library - DECD as it did not exist in the Canada.ca design system. We conducted research on best practices and designed with accessibility at the forefront.