InputField

Offers users a simple input for a form.

When to use

  • To gather basic information from users.
  • To specify what kind of data users can enter.

When not to use

  • You have multiple related fields—use an input group.
  • You want longer responses from users (such as feedback)—use a textarea.
  • You want users to upload a file—use an input file.

Component status

Figma

React

iOS

Android

Released
Released
N/A
N/A

Content structure

Mobile

Label: provides a clear description of what users should fill in; placeholder: provides additional help for expected values; prefix: optionally adds icon or text context for expected values.

Desktop

Label: provides a clear description of what users should fill in; placeholder: provides additional help for expected values; prefix: optionally adds icon or text context for expected values; suffix: optionally improves clarity (text adds context and ButtonLink is actionable).

Behavior

Set input mode

Setting the proper input mode for the field (such as number, email address) helps make it clear what’s expected. It also displays the correct keyboard on mobile devices, making it easier for users to complete the field.

Content

Use labels

Labels serve to clearly present what’s expected. They’re especially important for people who don’t see other visual cues. But they also help everyone know exactly what to enter.

For the label, use short descriptive phrases, ideally nouns that make the request clear. See our patterns for form labels for some examples.

Use error and help messages

For more complicated fields, sometimes labels aren’t enough. You want to include any necessary information as clear as possible to help users complete the fields.

Use help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.

Remember that such messages are likely to invoke negative feelings, so be positive and focused on solutions to any problems.

Error and Help messages

Include placeholder examples

When you have additional information or helpful examples, include placeholder text to help users along.

Remember that placeholder text is visually less important, low in contrast, and disappears once users enter anything. So do not include anything necessary to complete the field.

Look & feel

Background color and borders

It’s important for fields to stand out from the background as something different that can be filled in.

That’s why our native fields come with a CloudNormal background to stand out against the White background natural to the app. And they don’t have a border as that would make them too heavy and overwhelming.

For our desktop and responsive fields, which are usually placed against a CloudLight background, the fields have a White background to stand out. They get a solid 1 px border to make sure it’s clear they’re a place to add input.

Suffixes

On mobile devices, users are used to the pattern where the right side of the input allows them to clear what they’ve entered. So that’s the only option for suffixes for native inputs.

On desktops, there isn’t such a common pattern, so there’s more freedom for input suffixes. Use icons or text to add clarity and button links to add actions (such as opening more information).