Number field

Installation

$npx shadcn@latest add @silicon-ui/number-field

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/number-field/number-field.tsx
- components/silicon-ui/number-field/number-field.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { NumberField } from "@/components/silicon-ui/number-field/number-field";

Prop	Type	Default
`label*`	`string`	—
`value`	`number`	—
`defaultValue`	`number`	`0`
`onValueChange`	`(value: number) => void`	—
`min`	`number`	`0`
`max`	`number`	`Number.MAX_SAFE_INTEGER`
`step`	`number`	`1`
`largeStep` PageUp, PageDown, and Shift with an arrow move this far. Defaults to ten steps.	`number`	—
`description`	`string`	—
`disabled`	`boolean`	—
`id`	`string`	—
`prefix` Text before the number, such as "$".	`NumberFieldAffix`	—
`suffix` Text after the number, such as " seats".	`NumberFieldAffix`	—
`scrub` Drag the label sideways to scrub the value, one step every few pixels.	`boolean`	`false`
`locale` Formatting locale. Fixed by default so server and client render the same digits.	`string`	`"en-US"`
`formatOptions` Fraction digits and grouping. Fraction digits follow the precision of `step` by default.	`{ minimumFractionDigits?: number; maximumFractionDigits?: number; useGrouping?: boolean }`	—
`size` Control height, type size, and default width.	`NumberFieldSize` `"sm""md""lg"`	`"md"`
`limitHint` A short note beside the label when a press meets a limit or a typed value passes one. `false` hides it; a function writes the copy.	`boolean \| ((edge: "min" \| "max", limit: number) => string)`	`true`