File Input

Component for uploading files with various styling options

Basic

Basic File Input

Preview Code Auto

Input(type='file', cls='file-input')

With Labels

Preview Code Auto

Pick a file Max size 2MB

Fieldset(
    Legend('Pick a file', cls='fieldset-legend'),
    Input(type='file', cls='file-input'),
    Label('Max size 2MB', cls='fieldset-label'),
    cls='fieldset'
)

Ghost Variant

Preview Code Auto

Input(type='file', cls='file-input file-input-ghost')

Variants

Color Variants

Preview Code Auto

Input(type='file', cls='file-input  file-input-primary'),
Input(type='file', cls='file-input file-input-secondary'),
Input(type='file', cls='file-input file-input-accent'),
Input(type='file', cls='file-input file-input-neutral'),
Input(type='file', cls='file-input file-input-info'),
Input(type='file', cls='file-input file-input-success'),
Input(type='file', cls='file-input file-input-warning'),
Input(type='file', cls='file-input file-input-error'),

Size Variants

Different file input sizes

Preview Code Auto

Input(type='file', cls='file-input file-input-xs'),
Input(type='file', cls='file-input file-input-sm'),
Input(type='file', cls='file-input file-input-md'),
Input(type='file', cls='file-input file-input-lg'),
Input(type='file', cls='file-input file-input-xl'),

Disabled State

Preview Code Auto

Input(type='file', placeholder="Disabled", disabled=true, cls='file-input')

Class Reference

Class	Type	Description
file-input	Component	Base class
file-input-ghost	Variant	Ghost style without background
file-input-neutral	Color	Neutral color variant
file-input-primary	Color	Primary color variant
file-input-secondary	Color	Secondary color variant
file-input-accent	Color	Accent color variant
file-input-info	Color	Info color variant
file-input-success	Color	Success color variant
file-input-warning	Color	Warning color variant
file-input-error	Color	Error color variant
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

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo