DXC Logo
Halstack logo
Halstack
Design system
v6.0.0
OverviewIntroduction
PrinciplesColorSpacingTypographyLayoutThemesLocalization
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard

File Input

Ready

The file input component is used to choose files from any location in the local machine and update those files to the server where the application is hosted. It is a common procedure in applications where files are required, like documents, images, or other information in digital formats.

Usage

Considerations for the file input component use:

Do's

  • Provide a meaningful label and helper text to help the user understand the files expected.
  • When displaying errors, provide feedback about the type of error using the error message.
  • When the file input process fails, provide useful information instead of showing an error message using technical or undetermined information (e.g. '0x94 ERROR_PATH_BUSY').

Don'ts

  • Use the file input component to upload multiple files inside a modal dialog.
  • Use a variant with drag and drop functionality when designing for mobile devices.

Variants

NameUse case
FileUse the file variant when designing for multidevice
FiledropUse in large or complex forms when designing only for desktop
DropzoneChoose the dropzone when the main purpose of the content is to file input files/images

Contents

Edit this page on GitHub
Previous
Dropdown
NextFlex