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 InputText component is PrimeNG’s single-line text input. Nettalco Theme styles it entirely through the global form.field token system, meaning every background, border, padding, focus ring, and sizing value is shared across all form field components for a consistent appearance.

Usage

<!-- Basic -->
<input pInputText type="text" placeholder="Enter value" />

<!-- With reactive form binding -->
<input pInputText type="text" [(ngModel)]="username" placeholder="Username" />

<!-- Size variants -->
<input pInputText type="text" size="small" placeholder="Small" />
<input pInputText type="text" size="large" placeholder="Large" />

<!-- Invalid state -->
<input pInputText type="text" [invalid]="true" placeholder="Invalid input" />
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';

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

Design Tokens

All tokens delegate to the global form.field namespace defined in the Nettalco base theme.
TokenValueDescription
background{form.field.background}Default input background
disabledBackground{form.field.disabled.background}Background when the input is 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}Input 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}Border 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}Animation transition 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

Base form.field resolved values (light mode)

TokenResolved value
form.field.background{surface.0}#ffffff
form.field.border.color{surface.300}
form.field.focus.border.color{primary.color}
form.field.invalid.border.color{red.400}
form.field.border.radius{border.radius.md}6px
form.field.padding.x0.75rem
form.field.padding.y0.5rem
form.field.focus.ring.width0 (no ring by default)
form.field.transition.duration{transition.duration}0.2s

Theme Notes

InputText in Nettalco Theme has no bespoke token overrides — every visual property delegates to form.field.*. This means changing a base form field token automatically updates InputText alongside every other text-based input.
The focus ring is disabled by default (width: 0, style: none). PrimeNG instead highlights the input via focusBorderColor, which resolves to the primary emerald color. To re-enable a traditional focus ring, override form.field.focus.ring.width and form.field.focus.ring.style in your theme configuration.

Build docs developers (and LLMs) love