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

Accessibility guidelines coming soon