NumberInput

Input component for numeric values (integers, floats) rendering an <input type="number"> with parsing & formatting support.

Installation

pnpm dlx shadcn@latest add @shadmin/number-input

Usage

import { NumberInput } from '@/components/admin';
 
<NumberInput source="price" />
<NumberInput source="price" step={0.1} min={0} max={100} placeholder="Enter a price" />

Internally manages a local string state so users can type incomplete numbers (e.g. '-') before parsing.

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field name
`className`	Optional	`string`	-	CSS classes
`defaultValue`	Optional	`boolean`	-	Default value
`disabled`	Optional	`boolean`	-	Disable input
`format`	Optional	`function`	-	Callback taking the value from the form state, and returning the input value.
`helperText`	Optional	`ReactNode`	-	Help text
`label`	Optional	`string \| false`	Inferred	Custom / hide label
`min`	Optional	`number`	-	The minimum value allowed for the input
`max`	Optional	`number`	-	The maximum value allowed for the
`parse`	Optional	`(value:string)=>number`	-	Callback taking the value from the input, and returning the value to be stored in the form state.
`placeholder`	Optional	`string`	-	Placeholder text
`step`	Optional	`number \| 'any'`	-	The step attribute to use. Use 'any' to allow any float value.
`validate`	Optional	`Validator \| Validator[]`	-	Validation

Additional props are passed to the underlying <input type="number"> element, e.g. min, max, etc.

Format and Parse

It's common to need to transform the value from the form state before passing it to the input, and vice-versa. You can achieve this by using the format and parse props.

form state value   --> format -->   html input value
   (typed)         <-- parse  <--      (string)

For example, you may want to store an amount in cents in the form state, but display it in dollars in the input:

{
  /* Unit Price is stored in cents, i.e. 123 means 1.23 */
}
<NumberInput
  source="unit_price"
  format={(v) => String(v * 100)}
  parse={(v) => parseFloat(v) / 100}
/>;