File input

Segmented native file picker with filename field, browse, and optional clear.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`invalid`	`invalid`	Invalid chrome on the segmented control.	`boolean`	`boolean`	`false`
`readonly`	`readonly`	Hides browse/clear and makes the filename field read-only.	`boolean`	`boolean`	`—`
`disabled`	`disabled`	Disables all controls in the composite.	`boolean`	`boolean`	`false`
`labelFile`	`label-file`	Left segment label (default `File`).	`string`	`string`	`"File"`
`labelBrowse`	`label-browse`	Browse control label (default `Browse`).	`string`	`string`	`"Browse"`
`labelClear`	`label-clear`	Clear button label (default `Clear`).	`string`	`string`	`"Clear"`
`accept`	`accept`	Passed to the native file input.	`string`	`string`	`""`
`name`	`name`	Form-associated name; participates in form submission when a file is set.	`string`	`string`	`""`
`placeholder`	`placeholder`	Placeholder on the filename text field.	`string`	`string`	`""`
`ariaLabel`	`aria-label`	Optional accessible name for the group.	`string`	`string`	`""`
`ariaLabelledby`	`aria-labelledby`	Optional id reference for the group label (often the field label element).	`string`	`string`	`""`
`ariaDescribedby`	`aria-describedby`	Optional hint or error ids.	`string`	`string`	`""`
`readOnly`	`readOnly`	—	`boolean`	`boolean`	`false`
`fileName`	`fileName`	Displayed filename; editable when not `readOnly`.	`string`	`string`	`""`

Methods

Method name	Parameters	Description
`formResetCallback() => void`	N/A	—

Usage

File input combines a visible filename, browse trigger, and optional clear control for single-file uploads. It works inside duo-field for labels, hints, and validation.

Do

Wrap in duo-field when you need a visible label, description, or error text.
Mirror invalid and disabled on the field when this control is a direct slotted child.
Provide aria-label, aria-labelledby, or aria-describedby on the host when the field label is not enough context.

Don’t

Don’t use for drag-and-drop zones or multi-file pickers without extending the pattern.
Don’t duplicate field labels on both duo-field and the file input when the field already labels the control.

Events

The host fires a bubbling, composed input event as CustomEvent<DuoFileInputState> after each user-driven update.