CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

File input

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

Examples

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

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

  • A11y Style Guide: Gives core recommendations for accessible forms.
  • W3C Forms Tutorial: Provides guidance on creating accessible forms.
  • Mozilla Developer Guides: Find technical summary for the file inputs.

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)