Primitives

Textarea

The textarea primitive can be used to enhance the accessibility of a textarea element and provide consistent interaction handling for hover, focus and press states.

/** This example uses ng-primitives styles, which are imported from ng-primitives/example-theme/index.css in the global styles file **/
import { Component } from "@angular/core";
import { NgpTextarea } from "ng-primitives/textarea";

@Component({
  selector: "app-root",
  imports: [NgpTextarea],
  template: `
    <textarea ngpTextarea placeholder="Enter your message"></textarea>
  `,
  styles: `
    :host {
      display: contents;
    }

    [ngpTextarea] {
      height: 72px;
      width: 90%;
      border-radius: 8px;
      padding: 8px 12px;
      border: none;
      box-shadow: var(--ngp-input-shadow);
      outline: none;
    }

    [ngpTextarea][data-focus] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 0px;
    }

    [ngpTextarea]::placeholder {
      color: var(--ngp-text-placeholder);
    }
  `,
})
export class AppComponent {}

Import

Import the Textarea primitives from ng-primitives/textarea.

import { NgpTextarea } from 'ng-primitives/textarea';

Usage

Assemble the textarea directives in your template.

<textarea ngpTextarea></textarea>

Reusable Component

Create an textarea component that uses the NgpTextarea directive.

import { Component } from '@angular/core';
import { Textarea } from './textarea';

@Component({
  selector: 'app-root',
  imports: [Textarea],
  template: `
    <textarea app-textarea placeholder="Enter your message"></textarea>
  `,
})
export default class App {}

Schematics

Generate a reusable textarea component using the Angular CLI.

ng g ng-primitives:primitive textarea

Options

path: The path at which to create the component file.
prefix: The prefix to apply to the generated component selector.
componentSuffix: The suffix to apply to the generated component class name.
fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

Examples

Here are some additional examples of how to use the Textarea primitive.

Textarea Form Field

The textarea automatically integrates with the form field primitives.

Message

Tell us about your favorite sandwich.

/** This example uses ng-primitives styles, which are imported from ng-primitives/example-theme/index.css in the global styles file **/
import { Component } from "@angular/core";
import {
  NgpDescription,
  NgpFormField,
  NgpLabel,
} from "ng-primitives/form-field";
import { NgpTextarea } from "ng-primitives/textarea";

@Component({
  selector: "app-root",
  imports: [NgpTextarea, NgpLabel, NgpDescription, NgpFormField],
  template: `
    <div ngpFormField>
      <label ngpLabel>Message</label>
      <p ngpDescription>Tell us about your favorite sandwich.</p>
      <textarea ngpTextarea placeholder="Enter your message"></textarea>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    [ngpFormField] {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 90%;
    }

    [ngpTextarea] {
      height: 72px;
      width: 90%;
      border-radius: 8px;
      padding: 8px 12px;
      border: none;
      box-shadow: var(--ngp-input-shadow);
      outline: none;
    }

    [ngpTextarea][data-focus] {
      outline: 2px solid var(--ngp-focus-ring);
      outline-offset: 0px;
    }

    [ngpTextarea]::placeholder {
      color: var(--ngp-text-placeholder);
    }

    [ngpLabel] {
      color: var(--ngp-text-primary);
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      margin: 0;
    }

    [ngpDescription] {
      color: var(--ngp-text-secondary);
      font-size: 0.75rem;
      line-height: 1rem;
      margin: 0 0 4px;
    }
  `,
})
export class AppComponent {}

API Reference

The following directives are available to import from the ng-primitives/textarea package:

NgpTextarea

Selector: [ngpTextarea]
Exported As: ngpTextarea

disabled

boolean

Whether the element is disabled.

Data Attributes

The following data attributes are applied to the ngpTextarea directive:

Attribute	Description
`data-hover`	Applied when the element is hovered.
`data-focus`	Applied when the element is focused.
`data-disabled`	Applied when the element is disabled.

Getting Started