File input

import { ... } from '@ag.ds-next/react/file-input';

<FileInput label="Passport" />

The File input component is a simple input for selecting and uploading files in a form. It is a wrapper around the native <input type="file" /> element. Use a File input component when you need to upload one file per form field or when you have multiple form fileds on a page that require one file attachment each. If you need to upload multiple attachments to one form field, use the File upload component instead.

Do

• use if only one file is being uploaded per form field
• use to conserve vertical space
• use when a drag and drop zone isn’t required

Don’t

• use if the user might need to remove the file after uploading
• use if you want the file to be uploaded immediately
• use for uploading multiple files
• use if the user might benefit from a drag and drop zone
• use if it’s the only form element on the page

Hint

Use the hint prop to provide help that’s relevant to the majority of users, like how their information will be used, or where to find it.

Don’t use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. This could frustrate users if the text is long.

Don’t include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.

<FileInput label="Passport" hint="Hint text" />

Required

The required prop can be used to indicate that user input is required on the field before a form can be submitted.

Required fields do not append ‘(optional)’ to the label and also use aria-required to indicate to screen readers that the field is required.

Hide optional label

The hideOptionalLabel prop can be used in situations where you want to indicate to screen reader users that a field is optional but don’t want to show the ‘(optional)’ label.

The usage of hideOptionalLabel should be reserved for inputs that filter data in a table or chart, and should never be used in standard forms for submitting information.

<Stack gap={1}>
	<FileInput label="Required" required />
	<FileInput label="Optional" required={false} />
	<FileInput
		label="Optional with hideOptionalLabel"
		required={false}
		hideOptionalLabel={true}
	/>
</Stack>

Invalid

Use the invalid prop to indicate if the user input is invalid.

<FileInput label="Invalid" invalid message="This input is invalid" />

Related components

• File upload – The File upload component allows users to attach one or multiple files to a form via drag-and-drop or by browsing their device.