Select fields
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
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.
Placeholders
When writing placeholder text it’s important to not duplicate the label. Instead the placeholder should be used a call to action.
Do
Prompt users to select an item from the list
Don't
Duplicate the label text
Helper text
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.
Do
Use helper text to provide additional guidance for users
States
Initial
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.
Focused
When a user has clicked/tapped a select field the bar/border and Label color is changed to fanduelBlueD1 and linkColor.
Populated
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.
Validation
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.
Grouping
Rules and guidelines covering grouping of Select Fields is the same as those for Text Fields.
Spacing
Select Fields follow the same spacing rules as Text Fields.