When to use this pattern

Use the text input component when you need to let users enter text that is no longer than a single line, such as their first or last name.

When not to use this pattern

Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the “textarea” component.

How it works

For an optional input that might not seem necessary to the user, you must explain why we are collecting this information using the ‘hint’ field setting:

This applies to all optional input field types.

If you are creating a “textarea” field rather than a standard text input, make sure you include the maximum character or word limit in the field’s placeholder text.

Use appropriately-sized text inputs

Help users understand what they should enter by making text inputs the right size for the content they’re intended for.

Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.