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 fromDocumentation 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.* tokens.
Usage
Design Tokens
Root
| Token | Value | Description |
|---|---|---|
transitionDuration | {transition.duration} | Animation duration for state changes |
Button
| Token | Value | Description |
|---|---|---|
button.width | 2.5rem | Width 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
| Token | Value | Description |
|---|---|---|
button.background | transparent | Default 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
| Token | Value | Description |
|---|---|---|
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.