rhf
RHF Number Input
A React Hook Form wrapper for Number Input component with automatic number formatting and validation support.
1. Import
Import the RHF Number Input component from the design system.
import RHFNumberInput from "@/design-system/components/rhf"2. Props
RHF Number Input component props.
| Prop | Type | Default |
|---|---|---|
| control | Control<T> | -- |
| name | Path<T> | -- |
| label | string | React.ReactNode | -- |
| format | 'integer' | 'decimal' | 'integer' |
| max | number | 999999999999 |
| allowNegative | boolean | false |
| decimalMaxFractionDigits | number | 3 |
| placeholder | string | -- |
| callback | (value: string) => void | -- |
| wrapperClassName | string | -- |
| inputClassName | string | -- |
| rightOutside | React.ReactNode | -- |
3. Usages
Common RHF Number Input patterns and configurations.
import { useForm } from "react-hook-form";
import RHFNumberInput from "@/design-system/components/rhf/rhf-number-input";
function Example() {
const { control } = useForm({
defaultValues: {
amount: undefined,
},
});
return (
<RHFNumberInput
control={control}
name="amount"
label="Amount"
placeholder="Enter amount"
/>
);
}