Page Loading

Text input field

The text input allows users to enter text into a field. It's best for short fields like a name or phone number.

Example

How to use the text input component

Use the text input component when you need to let users enter an answer that's no longer than a single line, such as their name, business name or phone number. It should be used when we can’t provide a multiple-choice option.

When not to use this component

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 text area component.

Do not use this component if you’d like to aggregate and standardise data. For example, if you used this question to allow users to enter their sector, you could end up with multiple variations of the same sector in CRM. Where possible, try to offer multiple-choice questions like a radio, checkbox or dropdown instead.  

Error messages

Error messages for the text input component should follow our standard error message styling. Let the user know how to fix their mistake in a clear and helpful way.  

Error messages for this component should usually start with ‘Enter’. For example, ‘Enter a valid email address’. In some cases, it may start with something like ‘Tell us’. For example, ‘Tell us more about your project’ or ‘Tell us about your leadership team’. 

Adding input fields in the CMS

At the moment, the input field component isn’t available to add to any other panels or components via the CMS. If you need to add an input field to a page or an existing form like our enquiry form, get in touch with Louise Spence.

Accessibility

Users should be able to navigate to the field using a keyboard. It should be clear when the field is in focus.  

Make sure the field label is clear, and add help text if you need to.