HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
File InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA control for choosing files, by pointer or by dropping them on it.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/file-input'import'@fusion.dev/helix-headless/file-input'Preview
API ReferenceRoothelix-file-inputA control for choosing files, by pointer or by dropping them on it.
PropTypeDefaultDescriptionacceptstring""Which files the picker offers, as a native `accept` list.capture"environment"|"user"Which camera or microphone a mobile picker should offer, if any.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.localestring""Language tag the sizes are written in.multiplebooleanfalseWhether more than one file can be chosen.namestring""Name submitted with the form.removeLabelstring"Remove"What the control removing one file is called, per file.requiredbooleanfalseWhether the form refuses to submit without it.triggerLabelstring"Choose files"What the trigger reads, where nothing is slotted into it.
ReadTypeDescriptionfilesFile[]The files chosen, which is the element's own and never assigned.formHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfeedbackWhat is wrong with it.hintHelp under the field.triggerWhat the reader presses to open the picker.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
MethodTypeDescriptionclear() => voidTakes every file back out.focus(options: FocusOptions) => voidPuts focus on the input, the way a label pointing at one would.removeAt(at: number) => voidDrops one file, by index.
PartDescriptioncontrolThe file input itself, which carries the label and validity.detailIts name and its reading, stacked.feedbackWhat is wrong with it.fieldThe box that is pressed and dropped on.fileOne chosen file.hintHelp under the field, while nothing is wrong.kindWhat kind of file it is.kind-dismissThe remove button, when `dismissible`.kind-dismiss-markThe glyph on the dismiss control, where none is slotted.kind-prefixThe category before the label.labelThe question, over the field.listThe chosen files.metaThe row holding its size and kind.nameIts name.removeThe control that takes it back out.sizeHow big it is.size-dismissThe remove button, when `dismissible`.size-dismiss-markThe glyph on the dismiss control, where none is slotted.size-prefixThe category before the label.triggerThe label that opens the picker.
CSS PropertyDescription--file-input-background-colorFill behind the field.--file-input-paddingPadding inside the field.
Roothelix-headless-file-inputA control for choosing files, by pointer or by dropping them on it.
PropTypeDefaultDescriptionacceptstring""Which files the picker offers, as a native `accept` list.capture"environment"|"user"Which camera or microphone a mobile picker should offer, if any.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.localestring""Language tag the sizes are written in.multiplebooleanfalseWhether more than one file can be chosen.namestring""Name submitted with the form.removeLabelstring"Remove"What the control removing one file is called, per file.requiredbooleanfalseWhether the form refuses to submit without it.triggerLabelstring"Choose files"What the trigger reads, where nothing is slotted into it.
ReadTypeDescriptionfilesFile[]The files chosen, which is the element's own and never assigned.formHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfeedbackWhat is wrong with it.hintHelp under the field.triggerWhat the reader presses to open the picker.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.
MethodTypeDescriptionclear() => voidTakes every file back out.focus(options: FocusOptions) => voidPuts focus on the input, the way a label pointing at one would.removeAt(at: number) => voidDrops one file, by index.
PartDescriptioncontrolThe file input itself, which carries the label and validity.detailIts name and its reading, stacked.feedbackWhat is wrong with it.fieldThe box that is pressed and dropped on.fileOne chosen file.hintHelp under the field, while nothing is wrong.kindWhat kind of file it is.kind-dismissThe remove button, when `dismissible`.kind-dismiss-markThe glyph on the dismiss control, where none is slotted.kind-prefixThe category before the label.labelThe question, over the field.listThe chosen files.metaThe row holding its size and kind.nameIts name.removeThe control that takes it back out.sizeHow big it is.size-dismissThe remove button, when `dismissible`.size-dismiss-markThe glyph on the dismiss control, where none is slotted.size-prefixThe category before the label.triggerThe label that opens the picker.
ExamplesNameDescriptionDisabledDisabled, which is a drop zone that refuses a drop.EventsA drop and a click reach the same place, and the value is the file names.From A CameraAsking a phone for its camera rather than its files.InvalidA file the field will not take, and what it says about it.PreviewA drop zone that also takes a click, accepting several files.PreviewA drop zone that also takes a click, accepting several files.SingleOne file of a named type, which is what an avatar upload wants.