HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TextareaView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorSeveral lines of text a reader types into.StableSince 0.1.0FormsUsageimport'@fusion.dev/helix/textarea'import'@fusion.dev/helix-headless/textarea'Preview
API ReferenceRoothelix-textareaSeveral lines of text a reader types into.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.autoGrowbooleanfalseWhether the box follows its own content rather than scrolling.colsnumberHow many characters wide the box is, where the layout is not deciding.defaultValuestring""The value the markup declared, which is where a reset returns to.dirNamestring""The name a second entry carries, holding which way the text runs.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.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.rowsnumber3How many lines the box is before anything is typed.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.valuestringWhat the control holds now, and what its form submits.wrap"hard"|"off"|"soft""soft"How the browser wraps the text, and whether the breaks are submitted with
it.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.textLengthnumberHow many characters the value holds.typestringWhat kind of control this is, which for a textarea is always the one word.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionchangeEventRelayed from the textarea 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.setSelectionRange(start: number, end: number, direction: SelectionDirection) => voidSelects a range, which is the one operation the three accessors above
cannot express between them.
PartDescriptioncontrolThe textarea itself.feedbackWhat is wrong with it.fieldThe box holding the control.hintHelp under the field, while nothing is wrong.labelThe question, over the field.
CSS PropertyDescription--textarea-background-colorFill behind the text.
Roothelix-headless-textareaSeveral lines of text a reader types into.
PropTypeDefaultDescriptionautocompletestring""What the browser may autofill here, as one of the platform's own tokens.autoGrowbooleanfalseWhether the box follows its own content rather than scrolling.colsnumberHow many characters wide the box is, where the layout is not deciding.defaultValuestring""The value the markup declared, which is where a reset returns to.dirNamestring""The name a second entry carries, holding which way the text runs.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.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.rowsnumber3How many lines the box is before anything is typed.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.valuestringWhat the control holds now, and what its form submits.wrap"hard"|"off"|"soft""soft"How the browser wraps the text, and whether the breaks are submitted with
it.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.textLengthnumberHow many characters the value holds.typestringWhat kind of control this is, which for a textarea is always the one word.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionchangeEventRelayed from the textarea 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.setSelectionRange(start: number, end: number, direction: SelectionDirection) => voidSelects a range, which is the one operation the three accessors above
cannot express between them.
PartDescriptioncontrolThe textarea itself.feedbackWhat is wrong with it.fieldThe box holding the control.hintHelp under the field, while nothing is wrong.labelThe question, over the field.
ExamplesNameDescriptionAuto GrowA box that grows with what is typed into it rather than scrolling.DisabledDisabled, filled and empty.EventsThe pair a field sends, and why one of them is not the other.InvalidA box reporting what is wrong with what is in it.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.RequiredRequired marked on the label, and what the browser says when it is skipped.SizingHow many lines it opens at, and the length it will take.