Last updated: September 2017
Select fields give users the ability to choose a single item from a predefined list. For example selecting their State/Province when entering payment information.
Labels give users a clear indication of the information required in the text field. Labels should not be used to provide examples or helper information.
When writing placeholder text it’s important to not duplicate the label. Instead the placeholder should be used a call to action.
Helper text allows for some minor extra information to be attached to the field itself, for example giving guidance on password strength, or length requirements. If the helper text is more than a line or two then the text should be broken out of the field into its own paragraph above the field.
When a select field is displayed to a user that has no preset value, or validation the user should be given direction as to what needs to be selected through the use of a Label, and on Web a Placeholder should be used as a call to action. Additional helper text can be used if additional direction is needed.
When a user has clicked/tapped a select field the bar/border and Label color is changed to
blue. On Android and iOS Label is replaced with the Placeholder when a user has tapped the select field, and the Label appears above.
The platform’s own select menu should be used on Android and iOS at all times, on Web the platform’s own menu should be used in most instances except when additional functionality is required that is not available in the native menu.
When a user has selected data from the list and is no longer focused on the field or if a value is available for the field without data entry, for example loading a previously submitted form, the Placeholder is replaced with the Value.
When a form has been validated, either live as a user selects items or after submission to a system the select fields which have errors are displayed with bar/border and Label colors in
red. On Android and iOS the error message is displayed in place of helper text, on Web the error message is displayed beneath the inputted value.
Rules and guidelines covering grouping of Select Fields is the same as those for Text Fields.
Select Fields follow the same spacing rules as Text Fields.