File Input

A drag-and-drop drop zone that lets users browse or drag files. Supports Accept filters, helper text, required, and disabled states.

Cover Picture

Browse or drag and drop here

PNG, JPG, WebP - Max 5MB

Usage Example

@fileinput.FileInput(fileinput.Config{
    ID:         "coverPicture",
    Name:       "cover",
    Label:      "Cover Picture",
    Accept:     "image/*",
    HelperText: "PNG, JPG, WebP - Max 5MB",
})

Upload

VariantUpload uses a compact text-input-style control for dense forms.

Resume No file selected PDF or DOCX - Max 10MB

Upload

@fileinput.FileInput(fileinput.Config{
    Variant:    fileinput.VariantUpload,
    ID:         "resume",
    Name:       "resume",
    Label:      "Resume",
    Accept:     ".pdf,.docx",
    HelperText: "PDF or DOCX - Max 10MB",
})

Required

Required: true marks the field as required for form submission.

Upload Document

Browse or drag and drop here

PDF, DOC, DOCX - Max 10MB

Required

@fileinput.FileInput(fileinput.Config{
    ID:         "document",
    Name:       "document",
    Label:      "Upload Document",
    Accept:     ".pdf,.doc,.docx",
    HelperText: "PDF, DOC, DOCX - Max 10MB",
    Required:   true,
})

Disabled

Disabled: true blocks browsing and drops and dims the zone.

Disabled Upload

Browse or drag and drop here

Uploads are currently disabled

Disabled

@fileinput.FileInput(fileinput.Config{
    ID:       "disabled",
    Name:     "disabled",
    Label:    "Disabled Upload",
    Disabled: true,
})

Without Label

Omit Label for a bare drop zone (e.g. inside a labelled field group).

Browse or drag and drop here

Any image or PDF - Max 5MB

Without Label

@fileinput.FileInput(fileinput.Config{
    ID:         "attachment",
    Name:       "attachment",
    Accept:     "image/*,.pdf",
    HelperText: "Any image or PDF - Max 5MB",
})

API Reference

Prop	Type	Default	Description
`Variant`	`fileinput.Variant`	`fileinput.VariantDropZone`	Visual style: VariantDropZone or VariantUpload.
`ID`	`string`	`""`	Unique id for the input (and label's for target).
`Name`	`string`	`""`	Form field name.
`Label`	`string`	`""`	Label above the drop zone (omit for none).
`Accept`	`string`	`""`	Accepted file types (e.g. "image/*", ".pdf,.doc").
`HelperText`	`string`	`""`	Hint text shown inside/under the zone.
`Required`	`bool`	`false`	Mark the field as required.
`Disabled`	`bool`	`false`	Disable browsing and drops.
`InputAttrs`	`templ.Attributes`	`nil`	Arbitrary attributes on the <input>.
`RootClass`	`string`	`""`	Extra classes on the container.

Combobox Form