1import { NumberInput } from '@cerberus/react'Usage
The NumberInput component provides a way to create input fields specifically for numeric values. It includes features such as increment and decrement buttons, and can be easily integrated with form libraries.
Scrubber
The NumberInput supports the scrubber interaction pattern. To use this pattern, use the scrubber prop. It uses the Pointer lock API and tracks the pointer movement. It also renders a virtual cursor which mimics the real cursor's pointer
Sizes
The NumberInput component supports different sizes to accommodate various design requirements. You can specify the size using the size prop.
Primitives
You can utilize the primitive components or the css prop to customize the number input.
| Component | Description |
|---|---|
| NumberInputRoot | The context provider for the NumberInput parts |
| NumberInputLabel | The label of the NumberInput |
| NumberInputControl | The wrapper of the NumberInput contents |
| NumberInputInput | The input of the NumberInput |
| NumberInputIncrementTrigger | The increment button of the NumberInput |
| NumberInputDecrementTrigger | The decrement button of the NumberInput |
| NumberInputScrubber | The scrubber of the NumberInput |
API
Props
The NumberInput component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| scrubber | false | Use scrubber controls for the number input. |
The NumberInput component also accepts all the props of the NumberInputRoot primitive props
Parts
The NumberInputParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The NumberInputRoot component which is the Provider for the family. |
| Label | The NumberInputLabel component which displays the label and "required" notice. |
| Input | The NumberInputInput component which is the input field. |
| Control | The NumberInputControl component which is the wrapper for the input and buttons. |
| IncrementTrigger | The NumberInputIncrementTrigger component which is the increment button. |
| DecrementTrigger | The NumberInputDecrementTrigger component which is the decrement button. |
| Scrubber | The NumberInputScrubber component which is the scrubber control. |
On this page