The InputText component is PrimeNG’s single-line text input. Nettalco Theme styles it entirely through the globalDocumentation 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.
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
Design Tokens
All tokens delegate to the globalform.field namespace defined in the Nettalco base theme.
| Token | Value | Description |
|---|---|---|
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)
| Token | Resolved 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.x | 0.75rem |
form.field.padding.y | 0.5rem |
form.field.focus.ring.width | 0 (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.