> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: a7efa0ec-c056-4cba-8ef2-677458c74c3b
---

# NumberInput

> Learn about the NumberInput component for use in UI extensions.

The `NumberInput` component renders a number input field. Commonly used within the [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form) component.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guidelines-number-input.png" alt="design-guidelines-number-input" />
</Frame>

1. **Label:** the input's label.
2. **Description:** the text that describes the field's purpose.
3. **Value:** an entered value.

```jsx theme={null}
import { NumberInput } from "@hubspot/ui-extensions";

const Extension = () => {
  const [portalCount, setPortalCount] = useState(0);
  return (
    <NumberInput
      label={"HubSpot Portal Count"}
      name="portalsNumber"
      description={"Number of active portals"}
      placeholder={"number of portals"}
      value={portalCount}
      onChange={value => setPortalCount(value)}
    />
  );
};
```

## Props

| Prop                | Type                          | Description                                                                                                                                                                                                                                            |
| ------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `defaultValue`      | Number                        | The value of the input on initial render.                                                                                                                                                                                                              |
| `description`       | String                        | Text that describes the field's purpose.                                                                                                                                                                                                               |
| `error`             | Boolean                       | When set to `true`, `validationMessage` is displayed as an error message if provided. The input will also render its error state to let the user know there's an error. When `false` (default), `validationMessage` is displayed as a success message. |
| `formatStyle`       | `'decimal'` \| `'percentage'` | Formats the input as a decimal or percentage.                                                                                                                                                                                                          |
| `label`             | String                        | The text that displays above the dropdown menu.                                                                                                                                                                                                        |
| `max`               | Number                        | Sets the upper bound of the input.                                                                                                                                                                                                                     |
| `min`               | Number                        | Sets the lower bound of the input.                                                                                                                                                                                                                     |
| `name`              | String                        | The input's unique identifier.                                                                                                                                                                                                                         |
| `onBlur`            | `(value: number) => void`     | A function that is called every time the field loses focus, passing the value.                                                                                                                                                                         |
| `onChange`          | `(value: number) => void`     | A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form.                                                                                                   |
| `onFocus`           | `(value: number) => void`     | A function that is called every time the field gets focused on, passing the value.                                                                                                                                                                     |
| `placeholder`       | String                        | The text that appears in the input before a value is set.                                                                                                                                                                                              |
| `precision`         | Number                        | Sets the number of digits to the right of the decimal point.                                                                                                                                                                                           |
| `readOnly`          | Boolean                       | When set to `true`, users will not be able to enter a value into the field. Set to `false` by default.                                                                                                                                                 |
| `required`          | Boolean                       | When set to `true`, displays a required field indicator.                                                                                                                                                                                               |
| `tooltip`           | String                        | The text that displays in a tooltip next to the label.                                                                                                                                                                                                 |
| `validationMessage` | String                        | The text to display if the input has an error.                                                                                                                                                                                                         |
| `value`             | String \| number              | The value of the input.                                                                                                                                                                                                                                |

## Usage example

A field in a form where salespeople can enter the total deal amount.

## Guidelines

* **DO:** make label and description text concise and clear.
* **DO:** include placeholder text to help users understand what's expected in the field.
* **DO:** indicate if there is a minimum or maximum number requirement.
* **DO:** indicate if a field is required.
* **DO:** include clear validation error messages so that users know how to fix errors.
* **DON'T:** use this component for long responses, such as open-ended comments or feedback. Instead, use the [TextArea component](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text-area).
* **DON'T:** use placeholder text for critical information, as it will disappear once users begin to type. Critical information should be placed in the label and descriptive text, with additional context in the tooltip if needed.

## Related components

* [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form)
* [DateInput](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/date-input)
* [MultiSelect](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/multi-select)