File Field

onChange

(files: File[]) => void

Default: —

Called with the resolved list of selected files.

onClear

() => void

Default: —

Called when cleared.

accept

string

Default: —

Native file-type filter.

dropLabel / dropHelperText

string

Default: "Choose a file or drag & drop it here" / —

Dropzone primary/helper text.

browseLabel / noFileLabel

string

Default: "Upload" / "No file chosen"

Browse button label / empty-state text.

startIcon / endIcon / prefix / suffix

ReactNode

Default: —

Adornments on the control.

label

ReactNode

Default: —

Field label.

description

ReactNode

Default: —

Helper text below the control.

error

ReactNode | boolean

Default: —

Error message, or true for an invalid state with no message.

multiple

boolean

Default: false

Allows selecting more than one file.

isDroppable

boolean

Default: ui === "dropzone"

Enables drag-and-drop.

maxFiles

number

Default: —

Optional max file count.

maxFileSize

number

Default: —

Optional max file size in bytes; oversized files are rejected.

clearable

boolean

Default: true

Shows a clear-all button when possible.

showFileList

boolean

Default: false

Shows the selected-files list below the control.

getFileUploadState

(file: File) => { status?; progress?; label? } | undefined

Default: —

UI-only upload progress/status for the selected-files list.

disabled

boolean

Default: false

Disables the control.

required

boolean

Default: false

Marks the field required.

ui

"inline" | "dropzone"

Default: "inline"

UI layout.

preview

"none" | "thumbnails"

Default: "none"

Thumbnail grid preview (dropzone only).

size

"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"

Default: "md"

Control size.

variant

"bordered" | "soft" | "filled" | "underlined"

Default: "bordered"

Visual variant. "filled" (text types) is borderless with a neutral fill at rest, border + ring on focus; other field types fall back to "bordered". "default"/"underline" are legacy aliases.

color

"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | string

Default: "default"

Semantic tone.

colorDepth

number

Default: 500

Shade depth for color.

radius

"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"

Default: "md"

Corner radius. `rounded` is a legacy alias.

labelPlacement

"top" | "left" | "right" | "floating"

Default: "top"

Label position relative to the control.

colSpan

number

Default: —

Sets `grid-column: span N` on the field wrapper — a real home for a layout hint in a spread config object (instead of leaking to the <input>).

wrapperClassName

string

Default: —

Class on the field wrapper (the element that also carries colSpan), separate from `className` on the control.

className

string

Default: —

Class applied to the root element.

style

CSSProperties

Default: —

Inline styles for the root element.

children

ReactNode

Default: —

FormFieldSet fields and other form content.

validationMode

"blur" | "change"

Default: "blur"

When fields are (re-)validated.

showErrorsOn

"blur" | "change"

Default: "blur"

When validation errors start showing.

validateOnMount

boolean

Default: false

Runs validation immediately on mount.

initialValues

FormData

Default: {}

Initial values for uncontrolled fields.

disableAutofill

boolean

Default: true

Adds autocomplete/autofill-defeating attributes to the form.

onSubmit

(formData: FormData) => void | Promise<void>

Default: —

Called with collected field values on submit (required).

onError

(errors: FormErrors) => void

Default: —

Called when submit is blocked by validation errors.

className

string

Default: ""

Class applied to the form element.