On this page
Proposed CSC Standards · 0.1.0
File uploaders
Choose or drop a file.
Accept a file the person intends to attach.
What this describes
When to use
- An application needs an attachment.
- The person should see the accepted types and the chosen file name.
When not to use
- A value that is not a file. Use Input.
Allowed variants
Standard
A labeled file field.
- Hierarchy
- Form control.
- Use in
- Application forms.
- Restriction
- Native file input remains.
- Accessibility
- Keyboard operable.
- Responsive
- Full width of the column.
Drop zone
A larger target that also accepts a drop.
- Hierarchy
- Prominent.
- Use in
- When a file is the main task.
- Restriction
- Drag is not the only path.
- Accessibility
- The button remains.
- Responsive
- The zone does not exceed the viewport.
Compact
A secondary attachment.
- Hierarchy
- Smaller.
- Use in
- An optional extra file.
- Restriction
- Still shows the file name.
- Accessibility
- Same native input.
- Responsive
- Stays inside the column.
Mandatory rules
Keep a native file input
The control includes a real file input so keyboard and assistive technology can activate it.
Implementation detail
A drop zone made only of a div cannot be operated from the keyboard.
Include a native file input. Do not make the drop zone a div alone.
Check: Tab reaches a control that opens the file dialog.
State accepted types and the result in text
The zone lists accepted types, and after selection it shows the file name.
Implementation detail
WCAG 3.3.2. A person needs to know what to provide and whether it was accepted.
Keep the helper text. Show the selected name. On rejection, use an error sentence, not a red border alone.
Check: The accepted types and the file name are text.
Do not accept a file type the product cannot store
The accept filter matches the server allow-list.
Implementation detail
A client-only filter is not a security control, but showing types the server will reject is a defect. The server must enforce the allow-list.
Set accept to the same types the server stores. Reject mismatches with text.
Check: An unsupported file shows an error and is not described as uploaded.
Use the drop zone only as an extra pointer path
Drag and drop is additional. The button or file input still works.
Implementation detail
Proposed CSC Standard. Drag and drop is unavailable to many keyboard users.
variant="dropzone" still exposes the file input.
Check: The keyboard path works when dragging is impossible.
Restrictions
No conditional or prohibited rules are published for this component.
Accessibility
- A keyboard-operable file input.
- Accepted types and errors are text.
- Drag and drop is optional.
Responsive behavior
- The zone is full width and wraps its instructions.
- The chosen file name wraps instead of overflowing.
Component states
Empty
Instructions and accepted types are visible.
Selected
The file name is shown.
Rejected
An error sentence explains the type or size.
Correct implementation
A native file input sits in a dashed zone. The label is visible.
Imports: None. Dependencies: None. Rules: UPL-001, UPL-004.
export function Attachment() {
return (
<label style={{ border: '1px dashed #9AA6D6', borderRadius: 12, padding: 22, display: 'grid', justifyItems: 'center' }}>
Choose a PDF
<input type="file" accept="application/pdf" />
</label>
);
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- A drop zone with no file input.
- Rejecting a file with color only.
- Claiming a file uploaded before the server accepts it.
Testing checklist
Agent prompts for this component are in the AI Development Hub.