Select fields

Components

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

    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 on Web 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 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.

        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. 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.

            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.