email-organizer/offline-docs/daisyui/file-input.md

daisyUI Documentation - File Input Component

File Input is a an input field for uploading files.

Classes and Usage

Core Classes:

• file-input - For element
• file-input-ghost - ghost style
• file-input-neutral - neutral color
• file-input-primary - primary color
• file-input-secondary - secondary color
• file-input-accent - accent color
• file-input-info - info color
• file-input-success - success color
• file-input-warning - warning color
• file-input-error - error color
• file-input-xs - Extra small size
• file-input-sm - Small size
• file-input-md - Medium size [Default]
• file-input-lg - Large size
• file-input-xl - Extra large size

Examples

Basic File Input

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

File Input Ghost Style

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

File Input with Fieldset and Label

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

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

File Input Colors

<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 File Input

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

Features

• Special styling for file input elements
• Multiple size options (xs, sm, md, lg, xl)
• Multiple color variants
• Ghost style option
• Works with fieldset and label components
• Disabled state support

This component is useful for creating styled file upload inputs that blend seamlessly with the rest of your daisyUI interface.