# @leafygreen-ui/number-input > leafyGreen UI Kit Number Input Latest version **5.1.1** (published 2026-01-21) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/number-input pnpm add @leafygreen-ui/number-input yarn add @leafygreen-ui/number-input bun add @leafygreen-ui/number-input ``` ## Health **Score 65/100 (B)** — status: stable. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.1.1 | | Published | 2026-01-21 | | First published | 2023-04-06 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 13 | | Unpacked size | 295.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 273 | | Maintainers | hswolff, thesonofthomp, brookescarlett, shaneeza, stephl3, _tsck | ## Links - npm: https://www.npmjs.com/package/@leafygreen-ui/number-input - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/number-input - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/number-input ## Dependencies (13) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.0 - [@leafygreen-ui/a11y](https://npm.io/package/@leafygreen-ui/a11y.md) ^3.0.5 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.8.0 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.1 - [@leafygreen-ui/button](https://npm.io/package/@leafygreen-ui/button.md) ^25.2.1 - [@leafygreen-ui/select](https://npm.io/package/@leafygreen-ui/select.md) ^17.0.3 - [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.2 - [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.0 - [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.2 - [@leafygreen-ui/tooltip](https://npm.io/package/@leafygreen-ui/tooltip.md) ^14.3.1 - [@leafygreen-ui/form-field](https://npm.io/package/@leafygreen-ui/form-field.md) ^4.0.9 - [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.4 ## Recent versions - 5.1.1 (latest) — 2026-01-21 - 1.0.19-popover.0 (popover) — 2024-01-16 - 1.0.8 (beta) — 2023-07-26 - 2.0.0-alpha.1 (alpha) — 2023-07-20 - 1.0.5-next.7 (next) — 2023-05-26 - 5.1.0 — 2026-01-14 - 5.0.12 — 2025-11-24 - 5.0.11 — 2025-11-13 - 5.0.10 — 2025-11-06 - 5.0.9 — 2025-10-31 - 5.0.8 — 2025-10-21 - 5.0.7 — 2025-09-10 - 5.0.6 — 2025-09-03 - 5.0.5 — 2025-08-08 - 5.0.4 — 2025-07-07 - … 59 more at https://npm.io/package/@leafygreen-ui/number-input/versions ## README # Number Input ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/number-input.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/number-input/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/number-input ``` ### Yarn ```shell yarn add @leafygreen-ui/number-input ``` ### NPM ```shell npm install @leafygreen-ui/number-input ``` ## Example ```js import { NumberInput } from '@leafygreen-ui/number-input'; // no unit {}} /> or // single unit {}} unit='Hour' /> or // select unit {}} unit='Hours' unitOptions={[ { displayName: 'Hours', value: 'hours', }, { displayName: 'Days', value: 'days', }, { displayName: 'Months', value: 'months', }, { displayName: 'Astronomical units', value: 'au', }, ]} onSelectChange={() => {}} /> ``` ## Properties | Prop | Type | Description | Default | | ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------- | | `id` | `string` | id associated with the number input. | | | `label` | `React.ReactNode` | Label shown above the number input. | | | `description` | `string` | Text shown above the number input but below the label; gives more details about the requirements for the input. | | | `value` | `string` | The controlled value of the number input. | | | `disabled` | `boolean` | Disables the component. | `false` | | `placeholder` | `string` | The placeholder text shown in the input field before the user begins typing. | | | `size` | `'xsmall'` \| `'small'` \| `'default'` \| `'large'` | Determines the size of the input. | `default` | | `state` | `'none'`\| `'error'` | Describes the state of the TextInput element before and after the input has been validated | `'none'` | | `errorMessage` | `string` | Error message that appears below the input. Renders only if `state='error'`. | `'This input needs your attention'` | | `successMessage` | `string` | Success message that appears below the input. Renders only if `state='valid'`. | `'Success'` | | `unit` | `React.ReactNode` \| `string` | The content that appears to the right of the input if using a single unit.

Required if using `unitOptions`. When using `unitOptions` this value becomes the controlled value of the select input. | `default` | | `unitOptions` | `Array<{displayName: string; value: string}>` | The options that appear in the select element attached to the right of the input. | `default` | | `onChange` | `(e: React.ChangeEvent) => void` | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing. | | `onBlur` | `(e: React.ChangeEvent) => void` | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing. | | | `onSelectChange` | `(unit: {displayName: string; value: string}) => void` | A change handler triggered when the unit is changed. | | `className` | `string` | ClassName for the component. | | | `inputClassName` | `string` | ClassName for the input component. | | | `selectClassName` | `string` | ClassName for the select component. | | | `darkMode` | `boolean` | Render the component in dark mode. | `false` | | ... | native `input` attributes | Any other props will be spread on the root `input` element | | --- _Source: https://npm.io/package/@leafygreen-ui/number-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._