Components
Phone Input
A number input component with increment/decrement controls and validation. Built on top of Base UI Number Field component.
Loading
Installation
pnpm dlx shadcn@latest add @toui/number-field
Examples
Size
Different sizes of number field components.
Loading
Pattern
Tokens
7 CSS variables in 3 categories.
height
| CSS Variable | Value | Description |
|---|---|---|
--number-field-height-sm | var(--component-height-sm) | — |
--number-field-height-md | var(--component-height-md) | — |
--number-field-height-lg | var(--component-height-lg) | — |
px
| CSS Variable | Value | Description |
|---|---|---|
--number-field-px-sm | var(--component-px-sm) | — |
--number-field-px-md | var(--component-px-md) | — |
--number-field-px-lg | var(--component-px-lg) | — |
radius
| CSS Variable | Value | Description |
|---|---|---|
--number-field-radius | var(--component-radius-md) | — |
API Reference
This component is based on Base UI Number Field primitive.