RHFCounterInput

A numeric counter input component for React Hook Form with increment/decrement buttons. Supports min/max boundaries, custom step values, and validation.

Installation

import { RHFCounterInput } from '@geckoui/geckoui';

Basic Usage

import { useForm, FormProvider } from 'react-hook-form';
import { RHFCounterInput } from '@geckoui/geckoui';

function Example() {
  const methods = useForm({
    defaultValues: {
      quantity: 1
    }
  });

  return (
    <FormProvider {...methods}>
      <RHFCounterInput name="quantity" min={0} max={10} />
    </FormProvider>
  );
}

Props API

Extends all props from CounterInput component plus:

Prop	Type	Default	Description
`name`	`string`	-	Field name (required)
`control`	`Control`	Auto-injected	Optional: Pass explicitly for nested forms
`rules`	`RegisterOptions`	-	Inline validation rules
`min`	`number`	`-Infinity`	Minimum allowed value
`max`	`number`	`Infinity`	Maximum allowed value
`step`	`number`	`1`	Increment/decrement step
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant
`onChange`	`(value: number) => void`	-	Change callback
...rest	`CounterInputProps`	-	All CounterInput component props

Examples

With Validation

Quantity*

import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

const schema = z.object({
  quantity: z.number().min(1, "Quantity must be at least 1").max(10, "Maximum 10 items")
});

const methods = useForm({
  resolver: zodResolver(schema),
  defaultValues: { quantity: 0 }
});

<RHFInputGroup label="Quantity" required>
  <RHFCounterInput name="quantity" min={0} max={10} />
</RHFInputGroup>

Sizes

<RHFCounterInput name="small" size="sm" />
<RHFCounterInput name="medium" size="md" />
<RHFCounterInput name="large" size="lg" />

Complete Form Example

const schema = z.object({
  adults: z.number().min(1, "At least 1 adult required"),
  children: z.number().min(0),
  rooms: z.number().min(1, "At least 1 room required")
});

const methods = useForm({
  resolver: zodResolver(schema),
  defaultValues: {
    adults: 1,
    children: 0,
    rooms: 1
  }
});

<form onSubmit={methods.handleSubmit(onSubmit)}>
  <RHFInputGroup label="Adults" required>
    <RHFCounterInput name="adults" min={1} max={10} />
  </RHFInputGroup>

  <RHFInputGroup label="Children">
    <RHFCounterInput name="children" min={0} max={10} />
  </RHFInputGroup>

  <RHFInputGroup label="Rooms" required>
    <RHFCounterInput name="rooms" min={1} max={5} />
  </RHFInputGroup>

  <Button type="submit">Book Now</Button>
</form>

CounterInput - Base counter input component
RHFNumberInput - Number input with text field
RHFInputGroup - Form group wrapper with label and error

RHFCounterInput

On this page