File Input

File Input is a an input field for uploading files.

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
file-input
Component
For <input> element
file-input-ghost
Style
ghost style
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 w-full max-w-xs" />
<input type="file" class="$$file-input w-full max-w-xs" />

File input with border

<input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />
<input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />

Ghost (no background)

<input type="file" class="$$file-input $$file-input-ghost w-full max-w-xs" />
<input type="file" class="$$file-input $$file-input-ghost w-full max-w-xs" />

With form-control and labels

<label class="$$form-control w-full max-w-xs">
  <div class="$$label">
    <span class="$$label-text">Pick a file</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
  <input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />
  <div class="$$label">
    <span class="$$label-text-alt">Alt label</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
</label>
<label class="$$form-control w-full max-w-xs">
  <div class="$$label">
    <span class="$$label-text">Pick a file</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
  <input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />
  <div class="$$label">
    <span class="$$label-text-alt">Alt label</span>
    <span class="$$label-text-alt">Alt label</span>
  </div>
</label>

Primary color

<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-primary w-full max-w-xs" />
<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-primary w-full max-w-xs" />

Secondary color

<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-secondary w-full max-w-xs" />
<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-secondary w-full max-w-xs" />

Accent color

<input type="file" class="$$file-input $$file-input-bordered $$file-input-accent w-full max-w-xs" />
<input type="file" class="$$file-input $$file-input-bordered $$file-input-accent w-full max-w-xs" />

Info color

<input type="file" class="$$file-input $$file-input-bordered $$file-input-info w-full max-w-xs" />
<input type="file" class="$$file-input $$file-input-bordered $$file-input-info w-full max-w-xs" />

Success color

<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-success w-full max-w-xs" />
<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-success w-full max-w-xs" />

Warning color

<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-warning w-full max-w-xs" />
<input
  type="file"
  class="$$file-input $$file-input-bordered $$file-input-warning w-full max-w-xs" />

Error color

<input type="file" class="$$file-input $$file-input-bordered $$file-input-error w-full max-w-xs" />
<input type="file" class="$$file-input $$file-input-bordered $$file-input-error w-full max-w-xs" />

Sizes

<!-- xs -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-xs w-full max-w-xs" />
<!-- sm -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-sm w-full max-w-xs" />
<!-- md -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-md w-full max-w-xs" />
<!-- lg -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-lg w-full max-w-xs" />
<!-- xs -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-xs w-full max-w-xs" />
<!-- sm -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-sm w-full max-w-xs" />
<!-- md -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-md w-full max-w-xs" />
<!-- lg -->
<input type="file" class="$$file-input $$file-input-bordered $$file-input-lg w-full max-w-xs" />

Disabled

<input
  type="file"
  placeholder="You can't touch this"
  class="$$file-input $$file-input-bordered w-full max-w-xs"
  disabled />
<input
  type="file"
  placeholder="You can't touch this"
  class="$$file-input $$file-input-bordered w-full max-w-xs"
  disabled />
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser