Form

Counter

Numeric input with increment/decrement controls.

Available inreactangular

Preview

Live previewreal component

Max tool results

Install

TerminalBash

$ npx mcp-elements add counter

Usage

counter-example.tsxTSX

import { useState } from 'react'
import { Counter } from '@mcp-elements/react'

export function Example() {
  const [value, setValue] = useState(4)
  return <Counter value={value} onChange={setValue} min={1} max={20} />
}

Props

Prop	Type	Default	Description
`value *`	`number`	—	Current numeric value (controlled)
`onChange *`	`(value: number) => void`	—	Called with the next value when incremented, decremented, or typed
`min`	`number`	`0`	Minimum allowed value
`max`	`number`	`99`	Maximum allowed value
`step`	`number`	`1`	Amount added or removed per increment/decrement
`disabled`	`boolean`	`false`	Whether the counter is disabled
`className`	`string`	—	Additional CSS classes