HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Code InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA field for a short piece of code, highlighted as it is typed.ExperimentalSince 0.216.0FormsUsageimport'@fusion.dev/helix/code-input'import'@fusion.dev/helix-sandbox/code-block'// Sandbox Code Blockimport'@fusion.dev/helix-headless/code-input'import'@fusion.dev/helix-sandbox/code-block'// Sandbox Code BlockPreview
API ReferenceRoothelix-code-inputA field for a short piece of code, highlighted as it is typed.
PropTypeDescriptionautocompletestringDefault""What the browser can autofill in the field, as a standard autocomplete
token.autoGrowbooleanDefaultfalseGrows the box to fit its content, so it does not scroll.clearablebooleanDefaultfalseDraws a button that empties the field while it holds text.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.colsnumberHow many characters wide the box is, when the layout does not set its
width.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.dirNamestringDefault""The name of a second form entry that submits the direction of the text.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.highlightCodeBlockHighlighterTurns the code into highlighted markup for its language, for this field
alone. Absent, the field draws with the highlighter registerHighlighter
gave the page, and plain where there is none. The markup is drawn as
given, so it escapes the code, as every highlighter does.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.languagestringDefault""The grammar to highlight, such as json, css, ts, html or sh. Empty is plain text.listeningLabelstringDefault"Listening"What a screen reader hears as listening starts.maxLengthnumberThe most characters the value can have.maxRowsnumberHow many lines an auto-grow field grows to before it scrolls. Absent,
it grows with all of its text.minLengthnumberThe fewest characters the value can have.namestringDefault""The name the control's value is submitted under.placeholderstringDefault""Text shown while the field is empty.readOnlybooleanDefaultfalseBlocks typing in the field. The value is still submitted with the form.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.rowsnumberDefault3How many lines the box is before anything is typed.selectionDirection"backward"|"forward"|"none"The direction of the selection, as a native textarea reports it.selectionEndnumberWhere the selection ends, as an offset into the value.selectionStartnumberWhere the selection starts, as an offset into the value.speechEngineSpeechEngineThe engine this field listens through, in place of the one
registerSpeechEngine gave the page, or the browser's own.stoppedListeningLabelstringDefault"Stopped listening"What a screen reader hears as listening stops.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.voicebooleanDefaultfalseDraws a button that listens for dictation and types what it hears at
the caret. Nothing listens until the button is pressed, and the
microphone is let go as listening stops. An input of type password,
email or number draws no button.voiceLabelstringDefault"Dictate"The dictation button's name while it is not listening.voiceStopLabelstringDefault"Stop dictation"The dictation button's name while it listens.wrap"hard"|"off"|"soft"Default"off"How the browser wraps the text, and whether the breaks are submitted with
it.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.listeningbooleanWhether the field is listening for dictation now.textLengthnumberHow many characters the value holds.typestringThe control's type, which is always textarea.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.endAfter the text, for an icon or an action beside it.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.startBefore the text, for an icon.
EventTypeDescriptionchangeEventSent from the textarea when the user finishes an edit.helix-before-changeHelixBeforeChangeEventFired as the text changes, and cancelable.helix-before-listenHelixBeforeListenEventThe dictation button was pressed. Cancelable: cancel it to keep the field from listening.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.helix-listenHelixListenEventDictation settled on a phrase and put it in the value, after the field's own input.inputEventFired after 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.highlighterChanged() => voidThe page registered another highlighter: draws again with it.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 a range of text, which the three selection properties cannot do
between them.startListening() => booleanStarts listening, as pressing the dictation button does, and returns
whether it did. It does not where voice drew no button, where the
field has nowhere to type, or where a listener refused
helix-before-listen.stopListening() => voidStops listening, keeping what was heard in the field.
PartDescriptionclearThe button that empties the field, under clearable.controlThe textarea itself.feedbackThe message that says what is wrong.fieldThe box that holds the textarea.highlightThe highlighted text, drawn under the textarea.hintHelp under the field, while nothing is wrong.labelThe label above the field.layersThe highlighted text and the textarea, one over the other.scrollerThe box that scrolls past max-rows, and sideways past a long line.voiceThe dictation button, under voice.voice-listeningThe dictation button while it listens. Set alongside voice.voice-statusWhat a screen reader hears as dictation starts and stops, drawn for no one else.
CSS PropertyDescription--code-input-background-colorFill behind the code.--code-input-border-colorEdge of the field at rest. Hover, focus and an error still draw their own.--code-input-font-sizeThe code's size. Defaults to text-sm, and never under 16px on a touch screen.--code-input-paddingSpace between the edge of the field and the code.--code-input-radiusCorner radius of the field.--dictation-levelHow loud the microphone is while the field listens for dictation, from 0 to 1, which the element sets; the ring around the dictation button grows with it.
Custom stateDescriptionblankThe field holds no text.invalidThe control has an error to show, from the browser's validation, validate, or your feedback.listeningWhile the field listens for dictation. The element sets --dictation-level on itself meanwhile, from 0 to 1, for a meter.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-code-inputA field for a short piece of code, highlighted as it is typed.
PropTypeDescriptionautocompletestringDefault""What the browser can autofill in the field, as a standard autocomplete
token.autoGrowbooleanDefaultfalseGrows the box to fit its content, so it does not scroll.clearablebooleanDefaultfalseDraws a button that empties the field while it holds text.clearLabelstringDefault"Clear"The accessible name of the clear button, which shows only an icon.colsnumberHow many characters wide the box is, when the layout does not set its
width.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.dirNamestringDefault""The name of a second form entry that submits the direction of the text.disabledbooleanDefaultfalseWhether the control is disabled and cannot be used.feedbackstringDefault""The validation message shown under the control. It replaces the
browser's message.highlightCodeBlockHighlighterTurns the code into highlighted markup for its language, for this field
alone. Absent, the field draws with the highlighter registerHighlighter
gave the page, and plain where there is none. The markup is drawn as
given, so it escapes the code, as every highlighter does.hintstringDefault""Help text shown under the control. A validation message replaces it.labelstringDefault""The field's label, which is also its accessible name. Content in the
label slot replaces it.languagestringDefault""The grammar to highlight, such as json, css, ts, html or sh. Empty is plain text.listeningLabelstringDefault"Listening"What a screen reader hears as listening starts.maxLengthnumberThe most characters the value can have.maxRowsnumberHow many lines an auto-grow field grows to before it scrolls. Absent,
it grows with all of its text.minLengthnumberThe fewest characters the value can have.namestringDefault""The name the control's value is submitted under.placeholderstringDefault""Text shown while the field is empty.readOnlybooleanDefaultfalseBlocks typing in the field. The value is still submitted with the form.requiredbooleanDefaultfalseWhether the field needs a value before the form can submit.rowsnumberDefault3How many lines the box is before anything is typed.selectionDirection"backward"|"forward"|"none"The direction of the selection, as a native textarea reports it.selectionEndnumberWhere the selection ends, as an offset into the value.selectionStartnumberWhere the selection starts, as an offset into the value.speechEngineSpeechEngineThe engine this field listens through, in place of the one
registerSpeechEngine gave the page, or the browser's own.stoppedListeningLabelstringDefault"Stopped listening"What a screen reader hears as listening stops.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.voicebooleanDefaultfalseDraws a button that listens for dictation and types what it hears at
the caret. Nothing listens until the button is pressed, and the
microphone is let go as listening stops. An input of type password,
email or number draws no button.voiceLabelstringDefault"Dictate"The dictation button's name while it is not listening.voiceStopLabelstringDefault"Stop dictation"The dictation button's name while it listens.wrap"hard"|"off"|"soft"Default"off"How long lines are drawn: off keeps each line its length and scrolls
sideways, as code reads, and soft wraps at the field's edge.
ReadTypeDescriptionformHTMLFormElement|nullThe form the control belongs to, or null.labelsNodeListThe labels associated with the control.listeningbooleanWhether the field is listening for dictation now.textLengthnumberHow many characters the value holds.typestringThe control's type, which is always textarea.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.endAfter the code, for an icon or an action beside it.feedbackThe message that says what is wrong, for content richer than a string. It shows while there is a message.hintHelp under the field, for content richer than the hint text.labelThe label, for content richer than the label text.startBefore the code, for an icon.
EventTypeDescriptionchangeEventSent from the textarea when the user finishes an edit.helix-before-changeHelixBeforeChangeEventFired as the text changes, and cancelable.helix-before-listenHelixBeforeListenEventThe dictation button was pressed. Cancelable: cancel it to keep the field from listening.helix-clearHelixClearEventFired after the clear button has emptied the field, after input and change.helix-listenHelixListenEventDictation settled on a phrase and put it in the value, after the field's own input.inputEventFired after 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.highlighterChanged() => voidThe page registered another highlighter: draws again with it.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 a range of text, which the three selection properties cannot do
between them.startListening() => booleanStarts listening, as pressing the dictation button does, and returns
whether it did. It does not where voice drew no button, where the
field has nowhere to type, or where a listener refused
helix-before-listen.stopListening() => voidStops listening, keeping what was heard in the field.
PartDescriptionclearThe button that empties the field, under clearable.controlThe textarea the reader types in, whose own text is transparent over the highlighted text.feedbackThe message that says what is wrong.fieldThe box that holds the code.highlightThe highlighted text, drawn under the textarea.hintHelp under the field, while nothing is wrong.labelThe label above the field.layersThe highlighted text and the textarea, one over the other.scrollerThe box that scrolls past max-rows, and sideways past a long line.voiceThe dictation button, under voice.voice-listeningThe dictation button while it listens. Set alongside voice.voice-statusWhat a screen reader hears as dictation starts and stops, drawn for no one else.
Custom stateDescriptionblankThe field holds no text.invalidThe control has an error to show, from the browser's validation, validate, or your feedback.listeningWhile the field listens for dictation. The element sets --dictation-level on itself meanwhile, from 0 to 1, for a meter.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionMax RowsA field that grows to six lines and scrolls past them.PreviewA field for JSON, highlighted as it is typed, that grows with its text.PreviewA field for JSON, highlighted as it is typed, that grows with its text.ValidateA field that checks its JSON with validate and says what is wrong.