HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA field for a single line of text.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/input'import'@fusion.dev/helix-headless/input'Preview
API ReferenceRoothelix-inputA field for a single line of text.
PropTypeDescriptionautocapitalizestringDefault""Whether a phone capitalizes as the reader types: off, sentences,
words or characters, as the platform's autocapitalize.autocompletestringDefault""What the browser may autofill in the field, as an HTML autocomplete
token.clearablebooleanDefaultfalseWhether the field shows a button that empties it.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.enterKeyHintstringDefault""The key the on-screen keyboard shows for Enter, as the platform's
enterkeyhint: search, send, go, next, previous, done or
enter.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.hintstringDefault""Help text shown under the control. A validation message replaces it.inputModestringDefault""The keyboard a phone offers, as the platform's inputmode, such as
numeric for a code typed as text.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.maxstringDefault""The greatest value, for type="number". Number Input adds steppers and
keys to the same bounds.maxLengthnumberMost characters the value may have.minstringDefault""The least value, for type="number".minLengthnumberFewest characters the value may have.namestringDefault""The name the control's value is submitted under.patternstringDefault""A regular expression the value has to match, as the platform reads it.placeholderstringDefault""The text shown while the field is empty.readOnlybooleanDefaultfalseWhether the field blocks editing. A read-only field still submits its
value.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.revealbooleanDefaultfalseWhether a password field offers a toggle that shows what was typed.revealLabelstringDefault"Show password"The accessible name of the reveal toggle.selectionDirection"backward"|"forward"|"none"The direction of the selection, as the native input names it.selectionEndnumberWhere the selection ends, as an offset into the value.selectionStartnumberWhere the selection starts, as an offset into the value.stepstringDefault""The step a valid value is a multiple of, counted from min, for
type="number".type"email"|"number"|"password"|"search"|"tel"|"text"|"url"Default"text"The kind of text the field accepts. It sets the on-screen keyboard and the
validation.validateOwnRuleYour own rule for the value, run on every change once the browser finds
nothing wrong. Return a message, or a list of them, to mark the field
invalid, and true, null, or nothing to accept the value.valuestringThe control's current value, which its form submits.valueMissingMessagestringThe message shown when the field is required and empty.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionclear-iconReplaces the cross on the clear button, under clearable.conceal-iconReplaces the crossed-out eye on the reveal button while the password shows, under reveal.endAfter the text, for an icon or a unit.feedbackThe message that says what is wrong, for content richer than a string. It shows while there is a message.hintHelp under the control, for content richer than the hint text.labelThe label, for content richer than the label text.reveal-iconReplaces the eye on the reveal button while the password is hidden, under reveal.startBefore the text, for an icon or a prefix.
EventTypeDescriptionchangeEventSent when the user finishes changing the value. Relayed from the native input.helix-before-changeHelixBeforeChangeEventThe text is about to change. Cancelable: cancel it to keep the current text.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.inputEventFired as the value changes.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidMoves focus to the control, as focusing a native control does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRequests a new value, and returns whether the change was applied.select() => voidSelects everything in the field.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.setRangeText(replacement: string, start: number, end: number, selectMode: SelectionMode) => voidReplaces a range of the text, as the native method does: the selection
where start and end are left out, and selectMode says what is
selected after. It sends no event, as the native method sends none.setSelectionRange(start: number, end: number, direction: "backward" | "forward" | "none") => voidSelects the range from start to end in one call, which setting
selectionStart and selectionEnd one at a time cannot always do.stepDown(count: unknown) => voidMoves a number, a date or a time down by step, count times. See stepUp.stepUp(count: unknown) => voidMoves a number, a date or a time up by step, count times, as the native
method does. It sends no event, as the native method sends none, and it
throws InvalidStateError on a type with no step, such as text.
PartDescriptionclearThe button that empties the field.controlThe native input.feedbackThe message that says what is wrong with the value.fieldThe box around the input, its slots, and its buttons.hintHelp text under the field, shown while there is no feedback.labelThe label above the field.revealThe button that shows and hides a password.reveal-pressedThe reveal button while the password is shown, added beside reveal.
CSS PropertyDescription--input-background-colorFill behind the text.--input-border-colorEdge of the field at rest. Hover, focus and an error still draw their own.--input-padding-inlineSpace between the edge of the field and what is inside it.--input-radiusCorner radius of the field.--input-sizeHeight of the field.
Custom stateDescriptionblankThe field holds no text.invalidThe control has an error to show, from the browser's validation, validate, or your feedback.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-inputA field for a single line of text.
PropTypeDescriptionautocapitalizestringDefault""Whether a phone capitalizes as the reader types: off, sentences,
words or characters, as the platform's autocapitalize.autocompletestringDefault""What the browser may autofill in the field, as an HTML autocomplete
token.clearablebooleanDefaultfalseWhether the field shows a button that empties it.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.defaultValuestringDefault""The value the control starts with. A form reset returns it to this value,
and to the value attribute where this one is not written, as a native
control resets to the value it declares.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.enterKeyHintstringDefault""The key the on-screen keyboard shows for Enter, as the platform's
enterkeyhint: search, send, go, next, previous, done or
enter.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.hintstringDefault""Help text shown under the control. A validation message replaces it.inputModestringDefault""The keyboard a phone offers, as the platform's inputmode, such as
numeric for a code typed as text.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.maxstringDefault""The greatest value, for type="number". Number Input adds steppers and
keys to the same bounds.maxLengthnumberMost characters the value may have.minstringDefault""The least value, for type="number".minLengthnumberFewest characters the value may have.namestringDefault""The name the control's value is submitted under.patternstringDefault""A regular expression the value has to match, as the platform reads it.placeholderstringDefault""The text shown while the field is empty.readOnlybooleanDefaultfalseWhether the field blocks editing. A read-only field still submits its
value.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.revealbooleanDefaultfalseWhether a password field offers a toggle that shows what was typed.revealLabelstringDefault"Show password"The accessible name of the reveal toggle.selectionDirection"backward"|"forward"|"none"The direction of the selection, as the native input names it.selectionEndnumberWhere the selection ends, as an offset into the value.selectionStartnumberWhere the selection starts, as an offset into the value.stepstringDefault""The step a valid value is a multiple of, counted from min, for
type="number".type"email"|"number"|"password"|"search"|"tel"|"text"|"url"Default"text"The kind of text the field accepts. It sets the on-screen keyboard and the
validation.validateOwnRuleYour own rule for the value, run on every change once the browser finds
nothing wrong. Return a message, or a list of them, to mark the field
invalid, and true, null, or nothing to accept the value.valuestringThe control's current value, which its form submits.valueMissingMessagestringThe message shown when the field is required and empty.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.validationMessagestringThe message the browser would show for the control, or an empty string.validityValidityStateWhether the control meets its constraints, and why not.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.willValidatebooleanWhether the control is checked when its form is submitted.
SlotDescriptionclear-iconReplaces the cross on the clear button, under clearable.conceal-iconReplaces the crossed-out eye on the reveal button while the password shows, under reveal.endAfter the text, for an icon or a unit.feedbackThe message that says what is wrong, for content richer than a string. It shows while there is a message.hintHelp under the control, for content richer than the hint text.labelThe label, for content richer than the label text.reveal-iconReplaces the eye on the reveal button while the password is hidden, under reveal.startBefore the text, for an icon or a prefix.
EventTypeDescriptionchangeEventSent when the user finishes changing the value. Relayed from the native input.helix-before-changeHelixBeforeChangeEventThe text is about to change. Cancelable: cancel it to keep the current text.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.inputEventFired as the value changes.
MethodTypeDescriptioncheckValidity() => booleanReturns whether the control is valid, and fires invalid on it when it is
not. The control shows no message for it: reportValidity() does that.focus(options: FocusOptions) => voidPuts the caret in the field, as clicking its label does.reportValidity() => booleanReturns whether the control is valid, and when it is not, fires invalid
and shows the browser's message at the control.requestValue(next: string) => booleanRequests a new value, and returns whether the change was applied.select() => voidSelects everything in the field.setCustomValidity(message: string) => voidMarks the control invalid with message, or clears that with an empty
string, as on a native control. The form does not submit while it is set.setRangeText(replacement: string, start: number, end: number, selectMode: SelectionMode) => voidReplaces a range of the text, as the native method does: the selection
where start and end are left out, and selectMode says what is
selected after. It sends no event, as the native method sends none.setSelectionRange(start: number, end: number, direction: "backward" | "forward" | "none") => voidSelects the range from start to end in one call, which setting
selectionStart and selectionEnd one at a time cannot always do.stepDown(count: unknown) => voidMoves a number, a date or a time down by step, count times. See stepUp.stepUp(count: unknown) => voidMoves a number, a date or a time up by step, count times, as the native
method does. It sends no event, as the native method sends none, and it
throws InvalidStateError on a type with no step, such as text.
PartDescriptionclearThe button that empties the field.controlThe native input.feedbackThe message that says what is wrong with the value.fieldThe box around the input, its slots, and its buttons.hintHelp text under the field, shown while there is no feedback.labelThe label above the field.revealThe button that shows and hides a password.reveal-pressedThe reveal button while the password is shown, added beside reveal.
Custom stateDescriptionblankThe field holds no text.invalidThe control has an error to show, from the browser's validation, validate, or your feedback.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionAutocompleteFields with autocomplete tokens the browser can fill, and one with autofill turned off.ClearableA field with a control to empty it.DisabledA disabled field, and a field disabled by the fieldset around it.EventsEvery event a text field sends, in the order it sends them.InvalidA field with a message that says what is wrong with its value.Pattern And LengthA pattern and length limits on the value, checked by the browser.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.RequiredA required field, marked on its label, and the browser's message when it is left empty.RevealA password with a control to show what was typed.