Textarea
A native textarea wrapped like Input, with three height strategies and a rows-independent min/max bound for content-driven auto-sizing.
TextareaGroup is the multi-line sibling of InputGroup — same state model, same scheme
palette, same counter typography — plus a resize strategy for how its height behaves.
Minimal example
import { Component, signal } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { TextareaComponent, TextareaControlDirective } from "@sinequa/galactik";
@Component({
selector: "comment-field",
imports: [FormsModule, TextareaComponent, TextareaControlDirective],
template: `
<textarea-group>
<textarea textarea-control rows="4" placeholder="Your message…" [(ngModel)]="comment"></textarea>
</textarea-group>
`,
})
export class CommentFieldComponent {
readonly comment = signal("");
}How it works
resize="auto" is a progressive enhancement: the CSS field-sizing: content property ships in Chrome/Edge
123+ and Safari 17.4+, but not in Firefox, so the drag handle is only removed inside an @supports guard —
applying it unconditionally would leave Firefox with a box that neither grows nor can be dragged.
Recipes
Auto-sizing bounded by minRows/maxRows
rows has no effect once field-sizing: content applies, so minRows/maxRows exist precisely to bound an
auto-sizing field — the sizing API that survives where rows no longer does.
<textarea-group resize="auto" [maxRows]="3">
<textarea textarea-control rows="1" placeholder="Your message…"></textarea>
</textarea-group>Options
Prop
Type
Pitfalls
What's next
Input
A native input wrapped in a styled flex container that drives its focus, disabled and read-only look purely from the input's own state, with optional icon slots and a character counter.
Search Input
A search field styled like InputGroup, meant to sit inline among other form fields rather than standing alone as a pill.