Textarea#
Component <neo-textarea> is a native <textarea> (kept in the element's shadow root) with declarative manual-resize handles and auto-grow on either axis. Native textarea attributes (rows, placeholder, maxlength, value, …) go on the host and are forwarded to the field; the field stays fully native (form participation, IME, selection). Because it lives in the shadow, a fat morph can re-render the host without disturbing the live field.
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
value | string | none | Field value, not the light-DOM text content. Writes update the field live unless it has focus. value="" clears; an absent attribute leaves the current value untouched. |
disabled | boolean | false | Disable the field. The host shows the disabled state and forwards it to the native field. |
size | "sm" | "lg" | none | Control-size step: sm compact, lg large. Omit for the default size. |
scale-horizontal | boolean | false | Show a manual resize handle on the X axis. |
scale-vertical | boolean | false | Show a manual resize handle on the Y axis. |
auto-resize-width | boolean | length | false | Auto-grow the field on the X axis. Bare attribute grows without limit; a CSS length value caps the width. |
auto-resize-height | boolean | length | false | Auto-grow the field on the Y axis. Bare attribute grows without limit; a CSS length value caps the height. |
(native passthrough) | none | none | rows, cols, placeholder, maxlength, readonly, disabled, required, wrap, aria-*, … are forwarded to the field. name submits via the form-associated host. |
| Name | Detail | Bubbles | Description |
|---|---|---|---|
input | none | yes | Standard input event, bubbling from the native field. The host adds no custom events; listen for the native ones. |
change | none | yes | Standard change event, bubbling from the native field. |
| Name | Default | Description |
|---|---|---|
--neo-textarea-bg | var(--neo-button-bg) | Field background. |
--neo-textarea-color | var(--neo-button-color) | Field text color. |
--neo-textarea-border-color | var(--neo-button-border-color) | Border color. |
--neo-textarea-radius | var(--neo-button-radius) | Corner radius. |
--neo-textarea-padding | calc(var(--page-spacing, 0.25rem) * 2) calc(var(--page-spacing, 0.25rem) * 3) | Inner padding. |
--neo-textarea-focus-ring | var(--neo-button-focus-ring) | Focus ring. |
--neo-textarea-min-width | 16rem | Minimum field width. |
--neo-textarea-min-height | 4rem | Minimum field height. |
Examples#
Disabled#
disabled on the host disables the native field in the shadow root and applies the disabled surface state to the host.
Manual resize#
scale-vertical and scale-horizontal on the host show the native resize handle on that axis. Without either, the field is fixed at its rows-derived size.
Auto-grow height#
Bare auto-resize-height grows to fit the content with no upper bound; auto-resize-height="12rem" caps the growth and reveals the scrollbar past that.
Auto-grow width#
auto-resize-width stops the field from wrapping and grows it horizontally to the natural longest line, capped here at 20rem. Combine with auto-resize-height to get a textarea that snaps in both axes.