HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TextareaView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA multi-line text field.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/textarea'import'@fusion.dev/helix-headless/textarea'Preview
API ReferenceRoothelix-textareaA multi-line text field.
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.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.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.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.wrap"hard"|"off"|"soft"Default"soft"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.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-clearHelixClearEventFired after the clear button has emptied the field, after input and change.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.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.
PartDescriptionclearThe button that empties the field, under clearable.controlThe textarea itself.feedbackThe message that says what is wrong.fieldThe box that holds the textarea.hintHelp under the field, while nothing is wrong.labelThe label above the field.
CSS PropertyDescription--textarea-background-colorFill behind the text.--textarea-border-colorEdge of the field at rest. Hover, focus and an error still draw their own.--textarea-paddingSpace between the edge of the field and the text.--textarea-radiusCorner radius of the field.--textarea-resizeWhich way a reader can drag the field: vertical by default, none, both or horizontal. A field under auto-grow has nothing to drag.
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-textareaA multi-line text field.
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.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.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.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.wrap"hard"|"off"|"soft"Default"soft"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.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-clearHelixClearEventFired after the clear button has emptied the field, after input and change.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) => voidPuts the caret in the field, as a label pointing at it would.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.
PartDescriptionclearThe button that empties the field, under clearable.controlThe textarea itself.feedbackThe message that says what is wrong.fieldThe box that holds the textarea.hintHelp under the field, while nothing is wrong.labelThe label above 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.
Examples
NameDescriptionAuto GrowA box that grows as text is typed into it, so it does not scroll.DisabledA disabled textarea, set on the field and inherited from a disabled fieldset.EventsTyping sends helix-before-change and input, and leaving the field sends change.InvalidA textarea with an error message about its value.PreviewA multi-line field with a label and a hint.PreviewA multi-line field with a label and a hint.Read OnlyText that can be read and copied but not changed.RequiredA required field, marked on the label, and the browser's message when it is left empty.Rows And LengthThe number of lines a textarea opens at, and the fewest and most characters it accepts.