Text fields

Components

Last updated: August 2017

Text fields are the primary method of text entry within forms. Users should be able to easily provide information and make adjustments based on any validation present in the form.

    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 try to offer an example of what text a user would be expected to enter, with e.g. as the prefix to show that the text displayed is a placeholder and not a pre-populated value.

    Do

    Provide an example of the content

    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 text 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 entered through the use of a Label, and on Web a Placeholder. Additional helper text can be used if additional direction is needed.

      Focused

      When a user has clicked/tapped in to a text 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 into the text field and the Label appears above.

        Populated

        When a user has entered data 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 types or after submission to a system the text 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

            When creating a more complicated form, grouping can really help build a visual hierarchy on the page. It’s important to think logically about the groups themselves though.

            For example you might group day, month and year in a date of birth form. You could also group first name and last name. You wouldn’t want to group all of these together though as it will start to become overwhelming.

              Spacing

              Text fields are spaced internally according to our standard guidelines, and ungrouped fields should be spaced with 16px between each field.