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" />

File input ghost

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

With fieldset and fieldset-label

Pick a file
<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$fieldset-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="$$fieldset-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" />

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" />

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 />
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
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details