Textarea

At times you might expect users to provide you with comments, requests, or reasons for (dis)satisfaction. To do so, you’ll want to give them space to enter longer answers.

Textareas let you gather detailed information from your users, provided you offer them the proper guidelines on what you expect from them.

Component status

Figma

Planned

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Content structure

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.

import Textarea from "@kiwicom/orbit-components/lib/Textarea";

() => (
  <Textarea
    label="Your feedback"
    placeholder="What I liked about booking with Kiwi.com was ..."
  />
)

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 messages

import Textarea from "@kiwicom/orbit-components/lib/Textarea";

() => (
  <Textarea
    help="Tell us what you liked about your booking experience and what could change."
    label="Your feedback"
    placeholder="What I liked about booking with Kiwi.com was ..."
  />
)

Error messages

import Textarea from "@kiwicom/orbit-components/lib/Textarea";

() => {
  const [value, setValue] = React.useState("")
  return (
    <Textarea
      error={value ? "" : "Please enter some feedback"}
      value={value}
      onChange={(event) => setValue(event.target.value)}
      help="Tell us what you liked about your booking experience and what could change."
      label="Your feedback"
      placeholder="What I liked about booking with Kiwi.com was ..."
    />
  )
}

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 Textarea from "@kiwicom/orbit-components/lib/Textarea";

() => (
  <Textarea
    label="Your feedback"
    placeholder="What I liked about booking with Kiwi.com was ..."
  />
)

Look & feel

Background color and borders

See why background and borders for fields differ between app and website versions.

Related components

InputField

For short and simple user input, use an input field.

InputFile

For longer responses from users that they can upload in their own formats, use input file components.