v0.8.0
GitHub

File Inputs

API Docs

Styled file upload controls that accept single or multiple files, with customizable styling and validation options for modern form interfaces.

Basic File Input

File inputs allow users to select and upload files.

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "file1", title: "Upload Document")
  = daisy_file_input(name: "file1", id: "file1")

File Input with Accept Attribute

You can restrict the file types that can be selected using the accept attribute.

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "image", title: "Upload Image")
  = daisy_file_input(name: "image", id: "image", accept: "image/*")

  = daisy_label(for: "pdf", title: "Upload PDF", css: "mt-4")
  = daisy_file_input(name: "pdf", id: "pdf", accept: ".pdf")

Multiple File Selection

Enable multiple file selection with the multiple attribute.

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "documents", title: "Upload Documents")
  = daisy_file_input(name: "documents[]", id: "documents", multiple: true)

File Input with Different Colors

File inputs can be styled with additional CSS classes to change their appearance.

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "file_primary", title: "Primary File Input")
  = daisy_file_input(name: "file_primary", id: "file_primary", css: "file-input-primary")

  = daisy_label(for: "file_secondary", title: "Secondary File Input", css: "mt-4")
  = daisy_file_input(name: "file_secondary", id: "file_secondary", css: "file-input-secondary")

  = daisy_label(for: "file_accent", title: "Accent File Input", css: "mt-4")
  = daisy_file_input(name: "file_accent", id: "file_accent", css: "file-input-accent")

Ghost Style File Input

File inputs can use the file-input-ghost class for a minimalist appearance that only shows borders on focus.

Ghost style with background container:

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "file_ghost", title: "Ghost Style File Input")
  = daisy_file_input(name: "file_ghost", id: "file_ghost", css: "file-input-ghost")

  .mt-4.p-4.border.rounded-lg.bg-accent.text-accent-content
    %p.text-sm.mb-2 Ghost style with background container:
    = daisy_label(for: "file_ghost_bg", title: "Upload Files")
    = daisy_file_input(name: "file_ghost_bg", id: "file_ghost_bg", css: "file-input-ghost")

Disabled File Input

File inputs can be disabled using the disabled attribute.

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "file_disabled", title: "Disabled File Input", css: "cursor-not-allowed")
  = daisy_file_input(name: "file_disabled", id: "file_disabled", disabled: true)

Required File Input

File inputs can be marked as required using the required attribute.

.my-2.flex.flex-col.gap-4
  = daisy_label(for: "file_required", title: "Required File Input")
  = daisy_file_input(name: "file_required", id: "file_required", required: true)

Rails Form Example

The built-in Form Builder extension provides an easy way to use file inputs in your forms by extracting the name and ID attributes from the form object and attributes.

= form_with(url: "#", method: :post, scope: :user, html: { multipart: true }) do |form|
  .my-2.flex.flex-col.gap-4
    = form.daisy_label(:avatar)
    = form.daisy_file_input(:avatar)

    = form.daisy_label(:documents, "Upload Documents", css: "mt-4")
    = form.daisy_file_input(:documents, multiple: true)
Made with by Profoundry .
Copyright © 2023-2026 Profoundry LLC.
All rights reserved.
to select
to navigate
esc to close