Dropzone

Dropzone is a component used for uploading files via drag and drop.

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

<Dropzone aria-label="Upload file">
  <Text>Drag file here or click to select file</Text>
</Dropzone>

Copied!

<VStack gap="sm">
  <Text as="h3" id="label">
    Upload file
  </Text>

  <Dropzone aria-labelledby="label">
    <Text>Drag file here or click to select file</Text>
  </Dropzone>
</VStack>

Copied!

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`Dropzone`	`role="presentation"`	Indicates that this is a presentation element.
`input` Internal	`type="hidden"`	Exclude the element from the accessibility tree.
	`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.
	`aria-required`	Set to `"true"` if `isRequired` is set.

Edit this page on GitHub

PreviousFileButton NextSlider