Textarea
A native multiline control enhanced with Signal Forms, CSS-native auto sizing, Field composition and direct visual ownership.
GET STARTED
Import
Import the standalone directive from the granular Textarea entry point.
NATIVE FIRST
Basic textarea
The directive enhances the real textarea. Labels, validation, form submission, selection and native events stay on the same element.
Angular Forms
Template-driven, Reactive and Signal Forms bind directly to the native host. No ControlValueAccessor or duplicated model API is introduced.
CSS-native auto resize
autoResize uses field-sizing: content. It reads no scrollHeight, registers no browser listener and remains SSR safe.
Manual resize modes
Vertical is the default. Horizontal, both and none are explicit alternatives; auto resize always takes precedence.
States and Field composition
Disabled and readonly remain native. Neural Field composes deterministic naming, descriptions, required, invalid, pending, fluid and unstyled state.
Fluid layout
Fluid fills the available inline size while preserving native rows and resize behavior.
Unstyled and native classes
The host is already the native textarea, so ordinary class bindings are the styling API. Unstyled removes NeuralNg visual and resize classes while keeping structure and semantics.
TEXTAREA
Accessibility
Native textarea semantics remain intact; NeuralNg only contributes visual and Field composition behavior.
Native semantics
The directive never renders a wrapper or replacement control. Browser editing, selection, spellcheck, form submission and assistive-technology behavior remain native.
Accessible naming
Associate a visible label with for and id, compose Neural Field, or provide another valid name. Placeholder text is not a label replacement.
Hints and errors
Connect limits, hints and correction text through aria-describedby. Expose aria-invalid="true" only when an error should be announced.
Keyboard and resizing
Text editing follows the browser keyboard model. A manual resize handle remains available when the selected resize mode permits it; auto resize avoids a second interaction target.
State semantics
Disabled
Unavailable, unfocusable and excluded from form submission.
Readonly
Focusable, selectable and included in form submission.
Required
Use the native required state and a visible indication.
Reduced motion
Visual transitions collapse without changing editing behavior.
TEXTAREA
API
A deliberately small directive API layered on the complete HTMLTextAreaElement contract.
Directive
NeuralTextareatextarea[neuralTextarea]exportAs: neuralTextarea
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| fluid | boolean | false | Fills the available inline width. |
| autoResize | boolean | false | Uses CSS field-sizing: content and disables manual resizing. |
| resizeMode | NeuralTextareaResizeMode | 'vertical' | Selects vertical, horizontal, both or no manual resizing. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
Methods
focus(options?: FocusOptions) => voidFocuses the native textarea.
select() => voidSelects the complete native value.
Native API remains public
Rows, cols, name, placeholder, autocomplete, wrap, minlength, maxlength, required, disabled, readonly, spellcheck and form attributes stay native. Listen to native input, change, focus and blur events without aliases.
Public types and compatibility
NeuralTextareaResizeMode'vertical' | 'horizontal' | 'both' | 'none'
TextareaComponent remains a deprecated compatibility alias; new code imports NeuralTextarea.
TEXTAREA
Design tokens
Dimensions, states, typography, motion and auto-growth boundaries are independently tokenized.
Design tokens
Override tokens locally, at a product boundary or through a generated Neural theme.
--neural-textarea-widthComponent inline size.
--neural-textarea-min-heightComponent minimum block size.
--neural-textarea-auto-min-block-sizeMinimum logical height retained while auto resize is active.
--neural-textarea-auto-max-block-sizeMaximum logical height before an auto-resizing textarea starts scrolling.
--neural-textarea-paddingComponent internal spacing.
--neural-textarea-colorComponent foreground color.
--neural-textarea-color-hoverHovered component foreground color.
--neural-textarea-color-focusFocused component foreground color.
--neural-textarea-color-invalidInvalid component foreground color.
--neural-textarea-color-readonlyReadonly component foreground color.
--neural-textarea-caret-colorComponent text caret color.
--neural-textarea-backgroundComponent background surface.
--neural-textarea-background-hoverHovered component background surface.
--neural-textarea-background-focusFocused component background surface.
--neural-textarea-background-readonlyReadonly component background surface.
--neural-textarea-borderComponent border shorthand.
--neural-textarea-border-color-hoverHovered component border color.
--neural-textarea-border-color-focusFocused component border color.
--neural-textarea-border-color-invalidInvalid component border color.
--neural-textarea-radiusComponent corner radius.
--neural-textarea-shadowComponent box shadow.
--neural-textarea-shadow-hoverHovered component box shadow.
--neural-textarea-shadow-focusFocused component box shadow.
--neural-textarea-shadow-invalidInvalid component box shadow.
--neural-textarea-backdrop-filterComponent backdrop filter effect.
--neural-textarea-font-familyComponent font family.
--neural-textarea-font-sizeComponent font size.
--neural-textarea-font-weightComponent font weight.
--neural-textarea-line-heightComponent line height.
--neural-textarea-placeholder-colorPlaceholder foreground color.
--neural-textarea-placeholder-opacityPlaceholder opacity.
--neural-textarea-focus-ringComponent keyboard focus ring.
--neural-textarea-focus-ring-offsetComponent focus ring offset.
--neural-textarea-focus-color-invalidInvalid focus foreground color.
--neural-textarea-readonly-cursorReadonly pointer cursor.
--neural-textarea-disabled-opacityDisabled opacity.
--neural-textarea-transitionComponent CSS transition.