Taiga UI 5.0 is out!

Textarea KIT

Examples API GitHub

On this page

See also

Input, InputChipTextarea uses Textfield to create a multi-line string input.

Basic

Component would grow from minimal amount of rows until given maximum number of rows, after which scroll will be introduced. 
    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Large with label inside</label>
    <textarea
        placeholder="Placeholder"
        tuiTextarea
    ></textarea>
</tui-textfield>

<tui-textfield tuiTextfieldSize="m">
    <label tuiLabel>Medium with label inside</label>
    <textarea
        placeholder="Placeholder"
        tuiTextarea
    ></textarea>
</tui-textfield>

<label tuiLabel>
    Large with label outside
    <tui-textfield>
        <textarea
            placeholder="Placeholder"
            tuiTextarea
        ></textarea>
    </tui-textfield>
</label>

<label tuiLabel>
    Medium with label outside
    <tui-textfield tuiTextfieldSize="m">
        <textarea
            placeholder="Placeholder"
            tuiTextarea
        ></textarea>
    </tui-textfield>
</label>

<label tuiLabel>
    Small with label outside
    <tui-textfield tuiTextfieldSize="s">
        <textarea
            placeholder="Placeholder"
            tuiTextarea
        ></textarea>
    </tui-textfield>
</label>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Limit

You can pass limit to enable counter and extra characters highlight. This would also add validator. If you want to hard limit the field you can use native maxLength attribute.
0 / 100
    
      
    

      
      
    

  
    
      <tui-textfield [style.margin-block-end.rem]="1">
    <label tuiLabel>Limit</label>
    <textarea
        placeholder="Placeholder"
        tuiTextarea
        [formControl]="control"
        [limit]="100"
        [max]="6"
        [min]="3"
    ></textarea>
</tui-textfield>
<button
    tuiButton
    type="button"
    (click)="control.setValue('Short text')"
>
    Programmatically update
</button>

Custom highlight

It is possible to override default behavior to introduce your own highlight or other cosmetics. 
    
      
    

      
      
    

  
    
      <tui-textfield>
    <label tuiLabel>Custom highlight</label>
    <textarea
        placeholder="Type 'width' or 'height'"
        tuiTextarea
        [content]="highlight"
        [(ngModel)]="value"
    ></textarea>
</tui-textfield>

<ng-template
    #highlight
    let-text
>
    <span [innerHTML]="process(text)"></span>
</ng-template>

    

      
      
    

  
    
      :host {
    ::ng-deep .width {
        background: var(--tui-status-info-pale);
    }

    ::ng-deep .height {
        background: var(--tui-status-positive-pale);
    }
}

Icons

Being built on top of Textfield , Textarea supports most of the same configurations, such as icons on both sides. 
    
      
    

      
      
    

  
    
      <tui-textfield iconStart="@tui.pencil">
    <label tuiLabel>Your best thought</label>
    <textarea
        placeholder="Write something..."
        required
        tuiTextarea
        [max]="4"
        [min]="4"
        [(ngModel)]="value"
    ></textarea>
</tui-textfield>
GitHub StackBlitz