Text Fields



Each visible item to be shown on this page.

Input field

Interactive text field for user to enter their data into

⭐️ Ensure your font size is readable on all devices


Faint text in the text field that represents an example of what you want the user to enter

⭐️ Providing fake examples lets users understand how you would like them to enter the information

Text label

Clear description of what information the user is meant to provide

⭐️ Avoid all caps in your text label

Field size

Appropriate the size to how much the user should be expected to enter

Data format

Set text fields to allow the relevant text values it requires e.g. numeric only for phone number

⭐️ Alter the mobile keyboard to default to required text inputs e.g. number pad when entering phone number
⭐️ Hint at preferred data format with a placeholder value

Optional additions

Not always necessary, but they can have their perks!

Illustration or icon

A visual cue can help break up a long list of text fields

Helper text

Elaborate on the title of the text field incase a user struggles to know what to enter


The way a component can change based on interaction.


Button has not been interacted with and is visible

Input text


Mouse pointer is on top of button's container

Input text


Button has been clicked on by user

Input text


Button has been selected to receive input

Input text


Button is unable to be pressed

Input text


Button has been previously pressed, is typically optional to style

Input text