⌨️

Text Fields

Component

Features

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

Placeholder

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

States

The way a component can change based on interaction.

Default

Button has not been interacted with and is visible

Input text

Hover

Mouse pointer is on top of button's container

Input text

Active

Button has been clicked on by user

Input text

Focused

Button has been selected to receive input

Input text

Disabled

Button is unable to be pressed

Input text

Error

Button has been previously pressed, is typically optional to style

Input text