HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA single line of text a reader types into.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/input'import'@fusion.dev/helix-headless/input'Preview
API ReferenceRoothelix-inputA single line of text a reader types into.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.clearablebooleanfalseWhether the field offers a button that empties it.clearLabelstring"Clear"What the clear button is called, since an icon has no name of its own.defaultValuestring""The value the markup declared, which is where a reset returns to.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.maxLengthnumberMost characters the value may have.minLengthnumberFewest characters the value may have.namestring""Name submitted with the form.patternstring""A regular expression the value has to match, as the platform reads it.placeholderstring""Shown while the field is empty.readOnlybooleanfalseWhether the field refuses input while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.revealbooleanfalseWhether a password field offers a toggle that shows what was typed.revealLabelstring"Show password"What the reveal toggle is called.selectionDirectionSelectionDirectionThe caret and the selection, under the platform's own names.selectionEndnumberWhere the selection ends, as an offset into the value.selectionStartnumberWhere the selection starts, as an offset into the value.typeInputType"text"What the field accepts, which decides the keyboard and the validation.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|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.
SlotDescriptionendAfter the text, for an icon or a unit.startBefore the text, for an icon or a prefix.
EventTypeDescriptionchangeEventRelayed from the input once the reader has finished.helix-before-changeHelixBeforeChangeEventFired as the text changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.select() => voidSelects everything in the field.setSelectionRange(start: number, end: number, direction: SelectionDirection) => voidSelects a range, which is the one operation the three accessors above
cannot express between them.
PartDescriptionclearThe button that empties the field.controlThe input itself.feedbackWhat is wrong with it.fieldThe box holding everything.hintHelp under the field, while nothing is wrong.labelThe question, over the field.revealThe button that shows and hides a password.
CSS PropertyDescription--input-background-colorFill behind the text.--input-sizeHeight of the field.
Roothelix-headless-inputA single line of text a reader types into.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.clearablebooleanfalseWhether the field offers a button that empties it.clearLabelstring"Clear"What the clear button is called, since an icon has no name of its own.defaultValuestring""The value the markup declared, which is where a reset returns to.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.maxLengthnumberMost characters the value may have.minLengthnumberFewest characters the value may have.namestring""Name submitted with the form.patternstring""A regular expression the value has to match, as the platform reads it.placeholderstring""Shown while the field is empty.readOnlybooleanfalseWhether the field refuses input while still submitting its value.requiredbooleanfalseWhether the form refuses to submit without it.revealbooleanfalseWhether a password field offers a toggle that shows what was typed.revealLabelstring"Show password"What the reveal toggle is called.selectionDirectionSelectionDirectionThe caret and the selection, under the platform's own names.selectionEndnumberWhere the selection ends, as an offset into the value.selectionStartnumberWhere the selection starts, as an offset into the value.typeInputType"text"What the field accepts, which decides the keyboard and the validation.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|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.
SlotDescriptionendAfter the text, for an icon or a unit.startBefore the text, for an icon or a prefix.
EventTypeDescriptionchangeEventRelayed from the input once the reader has finished.helix-before-changeHelixBeforeChangeEventFired as the text changes, and cancelable.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.select() => voidSelects everything in the field.setSelectionRange(start: number, end: number, direction: SelectionDirection) => voidSelects a range, which is the one operation the three accessors above
cannot express between them.
PartDescriptionclearThe button that empties the field.controlThe input itself.feedbackWhat is wrong with it.fieldThe box holding everything.hintHelp under the field, while nothing is wrong.labelThe question, over the field.revealThe button that shows and hides a password.
ExamplesNameDescriptionClearableA field with a control to empty it.DisabledDisabled, filled and empty, since the two read differently.EventsEvery announcement a text field makes, in the order it makes them.InvalidA field reporting what is wrong with what is in it.PreviewA text field with a label, a placeholder and a hint.PreviewA text field with a label, a placeholder and a hint.Read OnlyA value that can be read and copied but not changed.RequiredRequired marked on the label, and what the browser says when it is skipped.RevealA password with a control to show what was typed.ValidationThe shape and length a value has to have, checked by the platform.