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 InputNumber component extends a text input with numeric formatting and optional increment/decrement buttons. Nettalco Theme customizes the spinner button’s dimensions, border radius, and color scheme for both light and dark modes, while the underlying text field inherits all styling from form.field.* tokens.

Usage

<!-- Basic numeric input -->
<p-inputNumber [(ngModel)]="quantity" />

<!-- Currency formatting with buttons -->
<p-inputNumber
  [(ngModel)]="price"
  mode="currency"
  currency="USD"
  [showButtons]="true"
  buttonLayout="horizontal"
/>

<!-- Min/max with step -->
<p-inputNumber
  [(ngModel)]="value"
  [min]="0"
  [max]="100"
  [step]="5"
  [showButtons]="true"
/>
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { InputNumberModule } from 'primeng/inputnumber';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [InputNumberModule, FormsModule],
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  quantity = 1;
  price = 9.99;
  value = 50;
}

Design Tokens

Root

TokenValueDescription
transitionDuration{transition.duration}Animation duration for state changes

Button

TokenValueDescription
button.width2.5remWidth of the increment/decrement buttons
button.borderRadius{form.field.border.radius}Button corner radius (matches field)
button.verticalPadding{form.field.padding.y}Vertical padding inside each button

Button color scheme — Light

TokenValueDescription
button.backgroundtransparentDefault button background
button.hoverBackground{surface.100}Background on hover
button.activeBackground{surface.200}Background when pressed
button.borderColor{form.field.border.color}Button border
button.hoverBorderColor{form.field.border.color}Border on hover
button.activeBorderColor{form.field.border.color}Border when pressed
button.color{surface.400}Icon color (default)
button.hoverColor{surface.500}Icon color on hover
button.activeColor{surface.600}Icon color when pressed

Button color scheme — Dark

TokenValueDescription
button.hoverBackground{surface.800}Background on hover
button.activeBackground{surface.700}Background when pressed
button.color{surface.400}Icon color (default)
button.hoverColor{surface.300}Icon color on hover
button.activeColor{surface.200}Icon color when pressed
The text field portion of InputNumber does not define its own tokens — it inherits all form.field.* values. See the InputText page for the full list of inherited tokens.

Theme Notes

Nettalco Theme keeps the spinner button background transparent by default in both light and dark modes. Hover and active states use subtle surface shades to give tactile feedback without clashing with the input field’s border.
The button’s borderColor always mirrors {form.field.border.color} across all states (default, hover, active). This keeps the button visually attached to the input and avoids a double-border effect on the joined side.

Build docs developers (and LLMs) love