File Upload

New

A styled file input component built on DaisyUI's .file-input class, wrapped in a <fieldset> for accessible labelling. Supports label, hint, error, size, colour, and variant props, as well as native accept and multiple attributes.

API Reference

Attribute	Description	Type	Default
`label`	Rendered as `<legend class="fieldset-legend">` above the input	string	`""`
`hint`	Helper text rendered below the input; hidden when `error` is set	string	`""`
`error`	Error message rendered below the input in `text-error`; also applies `file-input-error` to the input	string	`""`
`name`	Maps to the native `name` attribute on the `<input>`	string	`""`
`accept`	Maps to the native `accept` attribute; restricts the file types shown in the picker	string	`""`
`size`	Controls input height (`md` adds no modifier class)	string	`md`
`color`	Applies a DaisyUI semantic colour modifier to the input border/focus ring	string	`""`
`variant`	Visual style modifier — `bordered` or `ghost`	string	`""`
`disabled`	Disables the input	boolean	`False`
`multiple`	Allows the user to select more than one file at a time	boolean	`False`

size

xs sm md lg xl

color

primary secondary accent info success warning error neutral

variant

bordered ghost

Accessible label: always provide a label prop so the <legend> element announces the purpose of the input to screen readers. Without it, assistive technology users may not understand what file is expected.

accept attribute: using accept (e.g. accept="image/*" or accept=".pdf,.docx") filters the file picker OS dialog and reduces invalid submissions. Always validate server-side in addition to this client-side hint.

Multiple files: when multiple is set, consider adding a hint such as "You may select multiple files" so keyboard and screen reader users are aware of the capability before interacting with the input.

Error state: the error prop renders a visible error message. For full ARIA compliance, also add aria-describedby pointing to the error element when driving the component programmatically.

Examples

Usage


<c-file-upload />

Basic File Input

<c-file-upload />

With Label and Hint

Profile picture

Max size 2 MB — JPG, PNG or WebP

<c-file-upload
  label="Profile picture"
  hint="Max size 2 MB — JPG, PNG or WebP"
  accept="image/*"
  name="avatar"
/>

Error State

Signed contract

File exceeds the 10 MB limit. Please upload a smaller file.

<c-file-upload
  label="Signed contract"
  error="File exceeds the 10 MB limit. Please upload a smaller file."
  accept=".pdf"
  name="contract"
/>

Color Variants

Primary

Secondary

Accent

Success

Warning

Error

<c-file-upload color="primary" label="Primary" />
<c-file-upload color="secondary" label="Secondary" />
<c-file-upload color="accent" label="Accent" />
<c-file-upload color="success" label="Success" />
<c-file-upload color="warning" label="Warning" />
<c-file-upload color="error" label="Error" />

Size Variants

Extra small

Small

Medium (default)

Large

Extra large

<c-file-upload size="xs" label="Extra small" />
<c-file-upload size="sm" label="Small" />
<c-file-upload size="md" label="Medium (default)" />
<c-file-upload size="lg" label="Large" />
<c-file-upload size="xl" label="Extra large" />

Multiple Files

Attachments

You may select multiple files

<c-file-upload
  label="Attachments"
  hint="You may select multiple files"
  accept=".pdf,.docx,.xlsx"
  name="attachments"
  :multiple=True
/>