Input

Use a text input to collect single-line text data from users.

Use text inputs to:

Collect short, single-line text entries (e.g., names, addresses, search queries)

Gather structured data with appropriate input types (e.g., email, telephone, URL)

Allow users to enter information in forms and data entry interfaces

Capture user responses that require free-form text

Do not use text inputs:

For long-form content — use a textarea instead

When users need to select from predefined options — use select, radio buttons, or checkboxes instead

For dates — use an input date instead

For binary choices — use checkboxes or toggle switches instead

Building user confidence

Users need reassurance when they provide sensitive data. A clear, well-structured form can make it much easier for them to give the information.

Extract from a longer form that shows a heading and an email input field

Example of a Heading and input field


                                                        
                                                        
                                                            <h1>Contact details</h1>
                                                        
                                                        <form>
                                                        <label for="email-address">Your email address</label>
                                                        <p id="helper-text">We'll only use this to reply to your message</p>
                                                        <input aria-describedby="helper-text" id="email-address" name="email-address" type="email">
                                                        </form>

HTML example of a input form and heading

Do not use placeholder text

Do not use placeholder text in place of a label or for hints or examples, as:

It vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers

Not all screen readers read it out

It often has insufficient contrast to meet accessibility requirements

Do not use tooltips

Tooltips should not be used within forms:

They hide important information from the user

They may be easily overlooked on the page

They may obscure parts of the form or the page

They raise accessibility issues:

Adds to cognitive load when completing a form

Tooltip and its content can be lost at 200%-300% magnification

Tooltip contents could add complexity and comprehension overload for screen readers

There will be substantial interactive travel, causing fatigue to users with visual and motor impairments

Instead, surface the content from a tooltip within the helper text.

Examples of an enter password incorrectly using a tooltip over a form with helper text

Example of using helper text instead of tooltips in forms

Sizing

The width of text input fields should match the amount of data expected. This provides users with a visual cue for how much information to enter.

Layout and grouping

Forms should be single-column in most cases. Where there are related fields like start date and end date, you should put them inline.

Group related fields together in a fieldset with a legend or heading, depending on the content hierarchy.

It is best to start with easier fields and build up to the more difficult ones.