By default, file upload fields look terribly ugly. The a17t
.upload element is a mostly-headless way to override the default style with ease. It hides the file input, makes
button fields look nice (this is the most common element used with
.upload elements), and ensures that the cursor looks right.
It’s important that you use a
<label> as the parent element (that has the
.upload selector applied). If you don’t, it won’t automatically associate with the
<input>, and your file upload input won’t function.
Use with labels — Make sure that the
.upload element is an HTML
<label>. Not only does this have important accessibility consequences, your input won’t work without it.
Tab index — Because the
.upload element hides the actual file
<input> element, it’s critical that you set the
tabindex="0" attribute on the parent
<label> in order retain keyboard interactivity.
File uploads are headless — they don’t have a default style on their own — so you can use them in any number of variants.
Use Aria roles and labels. When building forms, it’s easy to rely on visual guidelines to show relationships between elements. Unfortunately, this doesn’t help those interacting with your site using a screenreader or other assistive technologies. For this reason, it’s important to use ARIA labels and roles wherever possible.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
This element has no variables.
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.