File Input

.file-input is for input[type="file"] elements.

Applicable Elements

• input[type="file"]

Basic Usage

<input class="file-input" type="file" />

Variants

.file-input supports the same visual roles as .button. Primary is the default.

<input class="file-input" type="file" />
<input class="file-input secondary" type="file" />
<input class="file-input tertiary" type="file" />
<input class="file-input shy" type="file" />

States

<input class="file-input error" type="file" />
<input class="file-input" type="file" disabled />

React component Advanced

<FileInput/> renders a single <input class="file-input" type="file" /> element.

It inherits the error property from a Fieldset component and automatically applies the error style.
It also provides drag-over feedback while files are dragged over it.