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

InputFile

Also known as Upload

Enables users to upload a file to complete a form.

If you need users to provide a separate document, use an InputFile component to give them clear guidance on what should be attached.

Component status

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

Content Structure

Label: provides a clear description of what users should upload; placeholder: provides additional info before a file is uploaded; button label: describes the main action and works best when short; help: optionally provides additional help for what's expected.

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 InputFile from "@kiwicom/orbit-components/lib/InputFile";
() => {
  const [fileName, setFileName] = React.useState("")
  const fileTypes = ".png,.jpg,.jpeg,.webp"
  return (
    <InputFile
      label="Profile photo"
      fileName={fileName}
      placeholder="No photo selected"
      buttonLabel="Select photo"
      allowedFileTypes={fileTypes}
      help={`Select a photo in one of the following types: ${fileTypes}`}
      onChange={(event) => setFileName(event.target.files[0].name)}
      onRemoveFile={() => setFileName("")}
    />
  )
}

Use specific action text

In addition to a label to help direct user action, change the label on the upload button to make it specific to what users need to upload.

import InputFile from "@kiwicom/orbit-components/lib/InputFile";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => {
  const [photoName, setPhotoName] = React.useState("")
  const [statementName, setStatementName] = React.useState("")
  const fileTypes = ".png,.jpg,.jpeg,.webp"
  return (
    <Stack spacing="XLarge">
      <InputFile
        buttonLabel="Select photo"
        label="Profile photo"
        onChange={(event) => setPhotoName(event.target.files[0].name)}
        onRemoveFile={() => setPhotoName("")}
        fileName={photoName}
        placeholder="No photo selected"
        allowedFileTypes={fileTypes}
        help={`Select a photo in one of the following types: ${fileTypes}`}
      />
      <InputFile
        buttonLabel="Select statement"
        label="Signed statement"
        fileName={statementName}
        placeholder="No file selected"
        allowedFileTypes=".pdf"
        help="Upload a signed statement as a PDF"
        onChange={(event) => setStatementName(event.target.files[0].name)}
        onRemoveFile={() => setStatementName("")}
      />
    </Stack>
  )
}

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 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 messages

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"
  />
)

Consider including placeholder text

To prompt users to upload a file, consider including relevant placeholder text to indicate the task isn’t done yet.

Remember that placeholder text is visually less important, low in contrast, and disappears once users enter anything. So do not include anything necessary, such as what file types are allowed.

Look & feel

Background color and borders

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

Related components

InputField

To collect smaller pieces of information from users, use an input field.

TextArea

To collect longer, text responses from users, use a text area.