FileInputField allows users to select files to upload.
To implement the FileInputField component, you need to import it first:
import { FileInputField } from '@react-ui-org/react-ui';
And use it:
See API for all available options.
Apply native HTML attributes to control what and how many files users can select.
Use short and descriptive labels, ideally nouns rather than seemingly polite phrases like Please attach your file here. Short labels will help your users accomplish their task faster.
Only make the FileInputField's label invisible when there is another visual clue to guide users through filling the input.
When a short label is not enough, use help texts to guide users before they enter anything.
Use clear, calm error messages when there's a problem with what they entered. Be positive and focus on solutions to make the error message helpful.
👉 FileInputField implements native HTML input type="file". Therefore, it is
not possible to affect neither its translations (they depend on a browser), nor
appearance.
Custom translations and appearance
are considered to be implemented at some point in the future. However, from the
layout perspective, FileInputFields work just like any other form fields.
Full-width fields span the full width of a parent:
In some cases, it may be convenient to visually hide the field label. The label remains accessible to assistive technologies.
While it may be acceptable for simple forms with just a few fields, it's dangerous to hide labels from users in most cases. Keep in mind you should provide another visual clue so users know what to fill into the input.
The default vertical layout is very easy to use and work with. However, there are situations where horizontal layout suits better — and that's why React UI supports this kind of layout as well.
You may provide an additional help text to clarify how the input should be filled.
Validation states visually present the result of validation of the input. You should always provide a validation message for states other than valid so users know what happened and what action they should take or what options they have.
It's possible to disable the whole input.
In addition to the options below in the component's API section, you
can specify React synthetic events or you can add whatever HTML attribute
you like. All attributes that don't interfere with the API are forwarded to
the native HTML <input>. This enables making the component interactive and
helps to improve its accessibility.
👉 Refer to the MDN reference for the full list of supported attributes of the file input type.
If you provide ref, it is forwarded to the native HTML <input> element.
| Prop name | Type | Default | Required | Description |
|---|---|---|---|---|
| disabled | bool | false | false | If |
| fullWidth | bool | false | false | If |
| helpText | node | null | false | Optional help text. |
| id | string | undefined | false | ID of the Also serves as base for ids of nested elements:
|
| isLabelVisible | bool | true | false | If |
| label | string | — | true | Text field label. |
| layout | 'horizontal' │ 'vertical' | 'vertical' | false | Layout of the field. Ignored if the component is rendered within |
| required | bool | false | false | If |
| validationState | 'invalid' │ 'valid' │ 'warning' | null | false | Alter the field to provide feedback based on validation result. |
| validationText | node | null | false | Validation message to be displayed. |
Head to Forms Theming to see shared form theming options.