HeroUI Number Field

Forms 4

About

HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Number Field to your project and fits it to your theme.

Code

How HeroUI Number Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Label } from "@heroui/react"
import { NumberField } from "@/components/ui/heroui-number-field"

export function Basic() {
  return (
    <NumberField className="w-full max-w-64" defaultValue={1024} minValue={0} name="width">
      <Label>Width</Label>
      <NumberField.Group>
        <NumberField.DecrementButton />
        <NumberField.Input className="w-[120px]" />
        <NumberField.IncrementButton />
      </NumberField.Group>
    </NumberField>
  )
}

export default Basic