HeroUI Number Field

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

HUby Hero Ui

Install

npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-number-field

Loading preview...

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