The NumberInput component renders a number input field. Commonly used within the Form component.
- Label: the input’s label.
- Description: the text that describes the field’s purpose.
- Value: an entered value.
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.
- 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.
Last modified on January 9, 2026
