Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

The Textarea component provides a multi-line text input backed by a native <textarea> element. Nettalco Theme applies the same comprehensive form.field.* token delegation as InputText, so Textarea inherits identical background, border, color, padding, and focus ring treatment — ensuring visual consistency across all text-based inputs.

Usage

<!-- Basic textarea -->
<textarea pTextarea rows="5" cols="30" placeholder="Enter description"></textarea>

<!-- Bound with ngModel -->
<textarea pTextarea [(ngModel)]="bio" rows="4" autoResize="true"></textarea>

<!-- Size variants -->
<textarea pTextarea size="small" rows="3" placeholder="Small"></textarea>
<textarea pTextarea size="large" rows="3" placeholder="Large"></textarea>

<!-- Invalid state -->
<textarea pTextarea [invalid]="true" rows="3" placeholder="Invalid"></textarea>
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextareaModule } from 'primeng/textarea';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [TextareaModule, FormsModule],
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  bio = '';
}

Design Tokens

All Textarea tokens delegate to the form.field namespace.
TokenValueDescription
background{form.field.background}Default textarea background
disabledBackground{form.field.disabled.background}Background when disabled
filledBackground{form.field.filled.background}Background in filled variant mode
filledHoverBackground{form.field.filled.hover.background}Filled background on hover
filledFocusBackground{form.field.filled.focus.background}Filled background on focus
borderColor{form.field.border.color}Default border color
hoverBorderColor{form.field.hover.border.color}Border color on hover
focusBorderColor{form.field.focus.border.color}Border color on focus
invalidBorderColor{form.field.invalid.border.color}Border color in invalid state
color{form.field.color}Text color
disabledColor{form.field.disabled.color}Text color when disabled
placeholderColor{form.field.placeholder.color}Placeholder text color
invalidPlaceholderColor{form.field.invalid.placeholder.color}Placeholder color in invalid state
shadow{form.field.shadow}Box shadow
paddingX{form.field.padding.x}Horizontal padding
paddingY{form.field.padding.y}Vertical padding
borderRadius{form.field.border.radius}Corner radius
focusRing.width{form.field.focus.ring.width}Focus ring width
focusRing.style{form.field.focus.ring.style}Focus ring style
focusRing.color{form.field.focus.ring.color}Focus ring color
focusRing.offset{form.field.focus.ring.offset}Focus ring offset
focusRing.shadow{form.field.focus.ring.shadow}Focus ring shadow
transitionDuration{form.field.transition.duration}Transition animation duration
sm.fontSize{form.field.sm.font.size}Font size for the sm size variant
sm.paddingX{form.field.sm.padding.x}Horizontal padding for sm
sm.paddingY{form.field.sm.padding.y}Vertical padding for sm
lg.fontSize{form.field.lg.font.size}Font size for the lg size variant
lg.paddingX{form.field.lg.padding.x}Horizontal padding for lg
lg.paddingY{form.field.lg.padding.y}Vertical padding for lg

Theme Notes

Textarea uses the exact same token structure as InputText. Any theme override applied to form.field.* tokens will affect both components simultaneously, which is intentional — multi-line inputs should look and feel like their single-line counterparts.
Use the PrimeNG autoResize attribute (autoResize="true") to allow the textarea to grow dynamically. This is purely a JavaScript behaviour; it does not affect any design tokens.

Build docs developers (and LLMs) love