File Inputs

Here are some examples showcasing file input components.

Basic File Input

File inputs allow users to select and upload files.

Upload Document

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

Preview

Upload Image Upload PDF

Code

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

Preview

Upload Documents

Code

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

Preview

Primary File Input Secondary File Input Accent File Input

Code

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

Preview

Ghost Style File Input

Ghost style with background container:

Upload Files

Code

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

Preview

Disabled File Input

Code

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

Preview

Required File Input

Code

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

Preview

Code

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

File Inputs

Basic File Input

File Input with Accept Attribute

Multiple File Selection

File Input with Different Colors

Ghost Style File Input

Disabled File Input

Required File Input

Rails Form Example

Docs

Guides

Hero

Daisy