Text Field
Usage
When to Use
Use a text field to allow users to enter custom short text entries, like addresses, names, or search queries.
When Not to Use
If you have limited options of what users can enter, use a drop-down list in combination with a select field instead.
To allow users to select a date or a range of dates, use a date picker in combination with a select field instead.
Size
Text fields are available in two sizes: medium (28 pixels height) and small (24 pixels height). Decide on one size for the whole application. This decision also affects buttons, select fields, and switchers.
Refer to the Sizing and Spacing Guidelines for more information.
Width
Generally, use a width of 100 pixels, 240 pixels or 400 pixels. Make sure that your text field size is big enough to fit the expected input.
In some cases, a custom width makes sense. For instance, to equal the left and right margins in a dialog.
If users need more than 400 pixels width to fit their input, make your input fields multiple lines high. This is also known as an input area. Since there is no standard solution in RingUI to this, just adapt it to your needs.
Label Position
Top-Aligned Labels
In most cases, it is best to align labels to the top of the text field. This way, users can see the label and the current input without making big eye movements between the label and the text field.
Left-Aligned Labels
You can also align labels to the left.
States
Error State
The error state indicates that some input is missing or erroneous. Usually, an error text is displayed below the text field.
If you don’t have enough space to add the description text below the text field, you can use an error bubble instead.
When the input field contains a help text, the help text gets replaced with the error message. It is essential that the error message still contains the relevant information of the original help text.
Pay attention when formulating the error message. The message should explain to users what they have to do to continue their process.
Disabled State
Select fields that are in the disabled state can’t be clicked or changed. Only use the disabled state if it is obvious why the select field is disabled. Users should not have to think about what to do to enable it.
Search and Filter Field
You can use slightly adapted text fields as search and filter fields. Two variants exist: the standard search field and the simple search field.
Standard Search Field
The standard search field is supplemented with a search icon button to the right of the text field. When users click this button, the results of the current input are displayed. Standard search fields affect the whole application and are therefore usually used in the header bar. In contrast to other text fields, they can have a height of 32 or 40 pixels.
As soon as users start typing in standard search fields, possible completions are displayed in a drop-down list.
Simple Search Field
The simple search field only includes a supportive visual clue in the form of a search icon. They are used for searches and filters that only affect smaller parts of the application, for instance, in sidebars.
For simple search fields, the results are displayed as soon as users start typing. When users extend or change their input, the results are automatically updated.
For more information about the correct use of search fields, check out this article: UXBooth, Best Practices for Search
Content
Always use the appropriate input format. If you are for instance asking for credit card information, provide a format that helps the user to insert the information easily. For dates, use the date picker.
If your input allows numbers only, and the numbers are relatively small, you can add a stepper to make the input easier.
Use short and descriptive labels. Try to use three or fewer words. If that’s not possible, provide a help text instead of using a long label.
Although it might be efficient in terms of development, don’t break text that belongs together into multiple text fields.
Use sentence-style capitalization for labels, help texts, and error messages. For help text, only end sentences with periods if you use two or more sentences.
If your form includes optional fields, mark those by attaching '(optional)' to the label. If possible, remove optional fields altogether.
Layout
Spacing With Top-Aligned Labels
Use 24 pixels of spacing for vertical alignment.
Spacing With Left-Aligned Labels
Text fields with left-aligned labels have a vertical spacing of 32 pixels.
The horizontal spacing between the label and the text field should be 32px. If you use multiple text or select fields, the longest label within the group is used to define the vertical spacing.
