Counter

A component for incrementing and decrementing numeric values with a clean interface.

Import

import Counter from '@/components/forms/Counter';

Prop	Type	Default	Description
`label`	`string`	Required	The label displayed next to the counter
`value`	`number`	`undefined`	The controlled value of the counter
`onChange`	`(value: number \| undefined) => void`	—	Called when the value changes
`min`	`number`	`0`	Minimum allowed value
`max`	`number`	`99`	Maximum allowed value
`className`	`string`	—	Additional class names for the container
`style`	`ViewStyle`	—	Custom styles for the container

<Counter
  label="Quantity"
  onChange={(value) => console.log('New value:', value)}
/>

const [quantity, setQuantity] = useState(1);
 
<Counter
  label="Quantity"
  value={quantity}
  onChange={setQuantity}
/>

<Counter
  label="Number of guests"
  min={1}
  max={10}
  onChange={setGuests}
/>