Adjust a number within a defined range.
import { useState } from 'react';
import { InputStepper } from '@vrum/ui';
export default function Demo() {
const [value, setValue] = useState<number | null>(3);
return (
<InputStepper
value={value}
min={0}
max={20}
step={1}
size={"md"}
disabled={false}
invalid={false}
onValueChange={setValue}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | none | Controlled value; connect the callback to application state. |
defaultValue | number | null | 0 | Initial value for an uncontrolled component. |
onValueChange | ((value: number | null) => void) | none | Called when the selected value changes. |
min | number | -Infinity | min configuration. |
max | number | Infinity | max configuration. |
step | number | 1 | step configuration. |
size | "sm" | "md" | "lg" | "md" | Size of the component. |
disabled | boolean | none | Disable user interaction. |
invalid | boolean | none | invalid configuration. |
placeholder | string | none | Hint shown when the field is empty. |
inputProps | React.InputHTMLAttributes<HTMLInputElement> | none | input props configuration. |
labels | { increase?: string; decrease?: string; } | none | labels configuration. |
defaultChecked | boolean | none | default checked configuration. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |