File input

File inputs are used to select one or more files from a user's device storage.

Examples

To render a file input, apply the class chi-file-inputto an input type="file" and add a label next to it.

Base #

This HTML Blueprint requires JavaScript to update the label content once a file or files have been selected. You may use your own JavaScript solution, or use Chi's example below.

Disabled #

This HTML Blueprint requires JavaScript to update the label content once a file or files have been selected. You may use your own JavaScript solution, or use Chi's example below.

Sizes #

File inputs support sizes:-xs,-sm,-md,-lg,-xl. The default size is -md.

-xs

-sm

-md

-lg

-xl

Web Component

Properties

Web component coming soon

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
Enter or SpaceOpens the file picker dialog when the file input is focused

For comprehensive details on keyboard support for input fields, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Guidance for developers
  • Use clear and descriptive labels for file inputs to help users understand their purpose.
  • Ensure each file input has an associated label element using the for attribute to match the id attribute of the file input.
  • Assign unique id attributes to each file input to maintain accessibility and prevent conflicts.
  • The fieldset surrounds the entire grouping of file inputs or radio buttons. The legend provides a description for the grouping.
  • Use the aria-describedby attribute to associate error messages with file inputs for accessibility.
  • Ensure that error messages are tagged with unique id attributes and referenced correctly with aria-describedby on corresponding file inputs.
Guidance for designers
  • Ensure focus indicators are clearly visible to aid navigation for keyboard users.
  • Keep input labels visible, even when fields are focused.
  • Use contrasting colors for text and backgrounds to enhance readability.
  • Design clear error states and feedback for accessibility.
  • Use spacing, typography, and visual cues effectively.
  • Maintain consistency in the design of file inputs to provide a cohesive user experience.

Find live examples in the A11y style guide.

Roles and attributes

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend.

RoleElementUsage
groupdivIdentifies the divelement as a group container for the file inputs.

Resources

Other recommendations

Explore additional accessibility tips in the general Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
  • Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
  • Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
  • Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)