TextField
A TextField is an interactive control used in forms to collect data from the user in a single-line text field.
Usage
- TextFields are primarily used within forms but can can also be used individually in more exceptional cases. It has a range of entry options to collect different information.
- Use a TextField if you want to allow the user to write over a single line. Otherwise use a Textarea.
Anatomy
A. Label
The text label associated with the TextField.
B. Optional label
Indicates if the input is optional. The optionalLabel also removes the required attribute from the input.
C. Field
The container in which a user's selected data is shown.
D. Action
Mostly a link that can refer more information on the subject.
E. Value
The content the user has entered into the field.
F. Message
Give additional information to the user.
Required vs optional
Rather than using an asterisk (*) to indicate required form inputs, Chameleon treats all form elements as required by default and displays an optionalLabel for fields that are optional.
Do’s & Don’ts
Use an appropriate input type for the data you collect.
Write error messaging in a human-centered way by guiding a user and communicating a solution.
Input labels and placeholder text should be in sentence case. This helps with scannability and legibility.
Input label text shouldn't be truncated or wrap over two or more lines. Keep it short, clear, and fully visible.