InputField

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

• 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.

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.

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.

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.

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.

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.

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).