Developer mode
Opens components on the React tab by default.
Your bookmarks

InputField

Also known as textbox

Offers users a simple input for a form.

Forms require input from users. When you only need basic information, use input fields to gather exactly what you need.

Input fields accept several types of data and can impose various restrictions to ensure you get what you need from users. And help and error guidance to ensure they know what to enter.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

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

Guidelines       

Use labels

Labels serve to clearly present what is expected. They are especially important for people who won’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.

Set input mode

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

Use help and error 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.

Help message

import InputField from "@kiwicom/orbit-components/lib/InputField";
() => (
  <InputField
    label="Password"
    placeholder="paSsw0rd"
    type="password"
    help="Use at least one uppercase letter and one number"
  />
)

Error message

import InputField from "@kiwicom/orbit-components/lib/InputField";
() => (
  <InputField
    label="Password"
    placeholder="paSsw0rd"
    type="password"
    help="Use at least one uppercase letter and one number"
    error="Your password must contain a number"
  />
)

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.

import InputField from "@kiwicom/orbit-components/lib/InputField";
() => <InputField label="Given names" placeholder="Sofia Cruz" />

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 Cloud / Normal 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 will usually be placed against a Cloud / Light 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).

import InputField from "@kiwicom/orbit-components/lib/InputField";
import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => {
  const [showPassword, setShowPassword] = React.useState(false)
  return (
    <Stack direction="column">
      <InputField label="Maximum price" type="number" suffix="Kč" />
      <InputField
        label="Password"
        type={showPassword ? "text" : "password"}
        suffix={
          <ButtonLink
            type="inline"
            iconLeft={
              showPassword ? (
                <VisibilityOff ariaLabel="Hide password" />
              ) : (
                <Visibility ariaLabel="Show password" />
              )
            }
            onClick={() => setShowPassword(!showPassword)}
          />
        }
      />
    </Stack>
  )
}

Related components

InputGroup

When you have multiple fields that are related, such as a day, month, and year of a date of birth, join them together in an input group to give them shared labels and validation.

TextArea

When you want longer responses from users, such as to get answers to open questions in a feedback form, use a text area to provide them space.