NumberInput

Migration guide for NumberInput to NumberField from HeroUI v2 to v3

Refer to the v3 NumberField documentation for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.

Structure Changes

In v2, NumberInput was a single component with props:

1import { NumberInput } from "@lenso/ui";2
3export default function App() {4  return <NumberInput label="Amount" defaultValue={1024} />;5}

In v3, NumberField requires compound components:

1import { NumberField, Label } from "@lenso/ui";2
3export default function App() {4  return (5    <NumberField defaultValue={1024}>6      <Label>Amount</Label>7      <NumberField.Group>8        <NumberField.DecrementButton />9        <NumberField.Input />10        <NumberField.IncrementButton />11      </NumberField.Group>12    </NumberField>13  );14}

Key Changes

1. Component Naming

v2: NumberInput
v3: NumberField

2. Component Structure

v2: Single component with props
v3: Compound components: NumberField.Group, NumberField.Input, NumberField.IncrementButton, NumberField.DecrementButton

3. Prop Changes

v2 Prop	v3 Location	Notes
`onValueChange`	`onChange`	Renamed event handler
`label`	—	Use `Label` component
`description`	—	Use `Description` component
`errorMessage`	—	Use `FieldError` component
`variant`	`variant` (on NumberField)	Simplified to `primary` \| `secondary` only
`color`	—	Removed (use Tailwind CSS)
`size`	—	Removed (use Tailwind CSS)
`radius`	—	Removed (use Tailwind CSS)
`startContent`	—	Place content manually in Group
`endContent`	—	Place content manually in Group
`labelPlacement`	—	Handle with layout classes
`hideStepper`	—	Omit `NumberField.IncrementButton` and `NumberField.DecrementButton`
`isClearable`	—	Handle clear functionality manually
`classNames`	—	Use `className` props on individual components
`isWheelDisabled`	—	Removed

Migration Examples

Form Validation

1{/* With description */}2<NumberInput3  description="Enter the amount"4  label="Amount"5/>6
7{/* With error message */}8<NumberInput9  errorMessage="Please enter a valid number"10  isInvalid11  label="Amount"12/>13
14{/* Required */}15<NumberInput isRequired label="Quantity" />

Controlled

1import { useState } from "react";2
3const [value, setValue] = useState();4
5<NumberInput6  value={value}7  onValueChange={setValue}8/>

Without Stepper Buttons

1<NumberInput hideStepper label="Amount" />

Number Constraints

1{/* Min/Max */}2<NumberInput3  label="Quantity"4  maxValue={100}5  minValue={0}6/>7
8{/* Step */}9<NumberInput label="Percentage" step={0.1} />10
11{/* Format options */}12<NumberInput13  formatOptions={{style: "currency", currency: "USD"}}14  label="Price"15/>

Component Anatomy

The v3 NumberField follows this structure:

1NumberField (Root)2  ├── Label (optional)3  ├── NumberField.Group4  │   ├── NumberField.DecrementButton5  │   ├── NumberField.Input6  │   └── NumberField.IncrementButton7  ├── Description (optional)8  └── FieldError (optional)

Summary

Component Renamed: NumberInput → NumberField
Component Structure: Must use compound components (NumberField.Group, NumberField.Input, etc.)
Label/Description/Error: Use separate components (Label, Description, FieldError)
Stepper Buttons: Must explicitly include NumberField.IncrementButton and NumberField.DecrementButton
Event Handler: onValueChange → onChange
Variant Simplified: v3 supports only variant="primary" and variant="secondary"; color, size, radius removed — use Tailwind CSS
Content Props Removed: startContent, endContent - place manually
Clear Button Removed: isClearable removed - handle manually
Stepper Control: hideStepper removed - omit buttons instead
Label Placement Removed: labelPlacement removed - handle with layout