NumberInput
The NumberInput component is designed for precise and efficient numeric input. It features a clean and intuitive interface, allowing users to enter numbers directly or adjust values using increment and decrement buttons.
Installation
Install the package
npm i @start-base/react-form-elementsAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/react-form-elements/styles.css";Import the component
import NumberInput from '@start-base/react-form-elements/NumberInput';Usages
Number Input With Label
Number Input With Placeholder
Number Input With Placeholder And Label
Number Input With Placeholder And Label And Disable Shrink
Number Input Disabled
Number Input Error
API
A numeric input component with options for prepending and appending elements.
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Name of the input | |
| label | string | null | Label of the input |
| placeholder | string | null | Placeholder of the input |
| disableShrink | boolean | false | Position the label outside of the input |
| value | string or number | Value of the input | |
| onChange | function | Callback function that is fired when the value changes. | |
| inputClassName | string | null | Classname for input element |
| labelClassName | string | null | Classname for label element |
| errorClassName | string | null | Classname for error element |
| disabled | boolean | false | Disable the input |
| error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |
| prepend | string or element | null | Prepend text to the input |
| appendClassName | string | null | Classname for append element |
| prependClassName | string | null | Classname for prepend element |