File Input

File Input is a an input field for uploading files.

Class name	Type
file-input	Component	For <input type="file"> element
file-input-ghost	Style	ghost style
file-input-neutral	Color	neutral color
file-input-primary	Color	primary color
file-input-secondary	Color	secondary color
file-input-accent	Color	accent color
file-input-info	Color	info color
file-input-success	Color	success color
file-input-warning	Color	warning color
file-input-error	Color	error color
file-input-xs	Size	Extra small size
file-input-sm	Size	Small size
file-input-md	Size	Medium size [Default]
file-input-lg	Size	Large size
file-input-xl	Size	Extra large size

File input

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

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

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

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

File input ghost

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

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

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

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

With fieldset and label

Pick a file Max size 2MB

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$label">Max size 2MB</label>
</fieldset>

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$label">Max size 2MB</label>
</fieldset>

            
                <fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$label">Max size 2MB</label>
</fieldset>

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$label">Max size 2MB</label>
</fieldset>

Sizes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Primary color

<input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

<input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

            
                <input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

<input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

Disabled

<input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

<input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

            
                <input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

<input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

Prev Fieldset

Next Filter

Do you have a question? Ask on GitHub or Discord server

Do you see a bug? open an issue on GitHub

Do you like daisyUI? Post about it!

Support daisyUI's development: Open Collective

Edit this page on GitHub

Text version for AI prompts

NEXUS
Official daisyUI Dashboard Template

Available on daisyUI store

More details