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 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
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, with the error message 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.