FileInput

FileInput is a component used for users to select files.

If you are not using FormControl, set aria-label or aria-labelledby to FileInput.

<FileInput placeholder="Select a file" aria-label="File upload" />

Copied!

<VStack gap="sm">
  <Heading as="h3" id="label">
    File upload
  </Heading>

  <FileInput placeholder="Select a file" aria-labelledby="label" />
</VStack>

Copied!

Keyboard Interaction

Key	Description	State
`Tab`	Focuses the element.	-
`Space`, `Enter`	When element has focus, activates it.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`FileInput`	`role="button"`	Indicates that it is a button.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-invalid`	Set to `"true"` if `isInvalid` is set.
`input` Internal	`aria-readonly`	Set to `"true"` if `isReadOnly` is set.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-invalid`	Set to `"true"` if `isInvalid` is set.

Edit this page on GitHub

PreviousColorPicker NextFileButton