Skip to main content
Corporate IdentityUniversity of Johannesburg
Settings
Appearance
Design
Menu

Forms

File input

Collect a file with an explicit label, constraints and linked validation feedback.

candidate@uj/design/componentsVersion 2.0.13Package 2.0.13draft

Production component

Live preview

This example is rendered from the same package consumed by UJ applications.

Upload one XLSX workbook. It will be validated before records change.

Required

Contract

Usage and quality requirements

The contract keeps purpose, states and ownership visible before a component is reused.

usage

  • Declare accepted file types
  • Explain size and format constraints in the hint
  • Return server validation as linked error text
  • Use native onChange when filename or pending feedback is needed
  • Keep parsing, malware scanning, storage and validation in the consuming application

states

  • empty
  • file selected
  • required
  • optional
  • disabled
  • invalid
  • pending upload
  • long filename
  • keyboard focus
  • narrow viewport
  • dark theme
  • forced colours

purpose

Collect one or more explicitly permitted files while keeping constraints, required state and validation feedback programmatically associated with the native file control.

responsive

  • Fluid control width
  • Long filename wrapping or clipping remains within the control
  • 320px
  • 768px
  • 1440px
  • 200% text resize

accessibility

  • Visible native file control
  • Explicit label
  • Hint and error use aria-describedby
  • Invalid state uses aria-invalid
  • Required state is visible and programmatic
  • Visible keyboard focus
  • WCAG 2.2 AA

runtime Boundary

The component performs no upload, file reading, parsing, scanning, storage or server validation.

source Authority

The consuming application's upload contract