# NumberInput
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/numberinput
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/numberinput.mdx
> Migration guide for NumberInput to NumberField from HeroUI v2 to v3
***
Refer to the [v3 NumberField documentation](/docs/react/components/numberfield) 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:
```tsx
import { NumberInput } from "@heroui/react";
export default function App() {
return ;
}
```
In v3, NumberField requires compound components:
```tsx
import { NumberField, Label } from "@heroui/react";
export default function App() {
return (
);
}
```
## 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
```tsx
{/* With description */}
{/* With error message */}
{/* Required */}
```
```tsx
import { Description, FieldError, Label } from "@heroui/react";
{/* With description */}
Enter the amount
{/* With error message */}
Please enter a valid number
{/* Required */}
```
### Controlled
```tsx
import { useState } from "react";
const [value, setValue] = useState();
```
```tsx
import { useState } from "react";
const [value, setValue] = useState();
```
### Without Stepper Buttons
```tsx
```
```tsx
```
### Number Constraints
```tsx
{/* Min/Max */}
{/* Step */}
{/* Format options */}
```
```tsx
{/* Min/Max */}
{/* Step */}
{/* Format options */}
```
## Component Anatomy
The v3 NumberField follows this structure:
```
NumberField (Root)
├── Label (optional)
├── NumberField.Group
│ ├── NumberField.DecrementButton
│ ├── NumberField.Input
│ └── NumberField.IncrementButton
├── Description (optional)
└── FieldError (optional)
```
## Summary
1. **Component Renamed**: `NumberInput` → `NumberField`
2. **Component Structure**: Must use compound components (`NumberField.Group`, `NumberField.Input`, etc.)
3. **Label/Description/Error**: Use separate components (`Label`, `Description`, `FieldError`)
4. **Stepper Buttons**: Must explicitly include `NumberField.IncrementButton` and `NumberField.DecrementButton`
5. **Event Handler**: `onValueChange` → `onChange`
6. **Variant Simplified**: v3 supports only `variant="primary"` and `variant="secondary"`; `color`, `size`, `radius` removed — use Tailwind CSS
7. **Content Props Removed**: `startContent`, `endContent` - place manually
8. **Clear Button Removed**: `isClearable` removed - handle manually
9. **Stepper Control**: `hideStepper` removed - omit buttons instead
10. **Label Placement Removed**: `labelPlacement` removed - handle with layout