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/*", css: "file-input-bordered")

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

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, css: "file-input-bordered")

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 file-input-bordered")

  = 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 file-input-bordered")

  = 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 file-input-bordered")

Ghost Style File Input

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

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-teal-200
    %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, css: "file-input-bordered")

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, css: "file-input-bordered")

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, css: "file-input-bordered")

    = form.daisy_label(:documents, "Upload Documents", css: "mt-4")
    = form.daisy_file_input(:documents, multiple: true, css: "file-input-bordered")

Made with by Profoundry .