File inputs

The .file-input class uses ::file-selector-button to style the “Choose file” button. FileInput does the same in React.

Examples

Variants

Vanilla CSS

<input type="file" class="file-input file-input-bordered" />
<input type="file" class="file-input file-input-ghost" />
<input type="file" class="file-input file-input-danger" />

React

<FileInput />
<FileInput variant="ghost" />
<FileInput variant="danger" />

Sizes

Vanilla CSS

<input type="file" class="file-input file-input-bordered file-input-sm" />
<input type="file" class="file-input file-input-bordered" />
<input type="file" class="file-input file-input-bordered file-input-lg" />

React

<FileInput inputSize="sm" />
<FileInput />
<FileInput inputSize="lg" />

Restricting file types

Native accept and multiple flow through unchanged.

Vanilla CSS

<input
  type="file"
  class="file-input file-input-bordered"
  accept="image/*"
  multiple
/>

React

<FileInput accept="image/*" multiple />

Disabled

Vanilla CSS

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

React

<FileInput disabled />