AngularLynx

    Textarea

    A multi-line text field that grows with its content, with an optional label, helper text and error message.

    ui-textareasrc/app/app.ts

    Installation

    npx @blotch/dolan add textarea
    import { UiTextarea } from '../components/ui/textarea';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { UiTextarea } from '../components/ui/textarea';

@Component({
  selector: 'app-root',
  imports: [UiTextarea],
  template: `
    <ui-textarea
      label="Bio"
      placeholder="Tell us about yourself"
      [(value)]="bio"
    />
  `,
})
export class App {
  protected readonly bio = signal('');
}
    • [(value)] updates your signal on every keystroke. Setting the signal from code updates the field too.
    • The field opens three lines tall and grows as the user types.
    • class styles the whole block of label, field and message.

    Height limits

    <ui-textarea label="Review" [minLines]="3" [maxLines]="6" [(value)]="review" />
<ui-textarea label="Note" [minLines]="1" [maxLines]="4" [(value)]="note" />
    • minLines sets the starting height.
    • maxLines stops the growth. Past it, the field scrolls and shows a scroll bar. Without it, the field keeps growing.
    • Each line is 20 pixels, the line height of the field's text.

    Helper text and errors

    <ui-textarea
  label="Feedback"
  helperText="Helps us improve"
  [(value)]="feedback"
/>
<ui-textarea
  label="Description"
  error="Description is required"
  [(value)]="description"
/>

    A non-empty error replaces the helper text with red text and turns the focus ring red. The field shakes when an error first appears.

    Disabled

    <ui-textarea label="System notes" value="Read only" [disabled]="true" />

    Signal Forms

    UiTextarea implements Angular's FormValueControl, so [formField] works on it the same way as on Input.

    API

    UiTextarea

    InputTypeDefaultDescription
    valuestring''The text. Supports [(value)].
    labelstring''Text above the field. Hidden when empty.
    placeholderstring''Hint shown while the field is empty.
    helperTextstring''Muted text under the field. Hidden while error is set.
    errorstring''Error text. Turns the ring red and shakes the field.
    disabledbooleanfalseDims the field and ignores typing.
    minLinesnumber3Starting height, in lines.
    maxLinesnumber | undefinedundefinedHeight at which the field stops growing and scrolls.
    classstring''Extra Tailwind classes for the outer block.
    OutputTypeDescription
    valueChangestringEmits the text on every keystroke, for [(value)].
    changedstringEmits the text on every keystroke.
    focusedvoidEmits when the field gains focus.
    blurredvoidEmits when the field loses focus.
    • Input: a single-line field
    • Forms: forms and the on-screen keyboard
    • <textarea>: the element underneath