Textarea
stable 1.6 kB<hk-textarea>A textarea that grows with its content up to a ceiling, then scrolls — so a one-line note does not reserve six lines of empty space.
#text#multiline
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | Model value. Two-way bindable. |
| rows | number | 2 | Starting height in rows. |
| maxRows | number | 10 | Height ceiling. Past it the field scrolls instead of growing. |
| autoGrow | boolean | true | Resizes to fit the content on every input. |
| maxlength | number | null | null | Hard character limit. |
| counter | boolean | false | Shows characters remaining. Needs maxlength. |
Outputs
valueChangeEventEmitter<string>Emits on every keystroke.
Keyboard
- Enter Inserts a newline — the field never submits the form
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-textarea-min | 4rem | Floor height, so an empty field still has a target. |
| --hk-textarea-max | 16rem | Ceiling before the field scrolls. |
Accessibility
- Resizing happens after the value lands, so the first paint is already the right height and nothing jumps.
- The counter is aria-live="polite" and only announces near the limit, not on every keystroke.