@leafygreen-ui/number-input NPM

Number Input

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/number-input

NPM

npm install @leafygreen-ui/number-input

Example

import { NumberInput } from '@leafygreen-ui/number-input';

// no unit
<NumberInput label={label} onChange={() => {}} />

or

// single unit
<NumberInput label={label} onChange={() => {}} unit='Hour' />

or

// select unit
<NumberInput
  label={label}
  onChange={() => {}}
  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`	`string`	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`	`string`	The string unit 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<HTMLInputElement>) => void`	The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing.
`onBlur`	`(e: React.ChangeEvent<HTMLInputElement>) => 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.
`portalContainer`	`HTMLElement` \| `null`	Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`.
`scrollContainer`	`HTMLElement` \| `null`	If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.
`portalClassName`	`string`	Passes the given className to the popover's portal container if the default portal container is being used.
`popoverZIndex`	`number`	Sets the z-index CSS property for the popover.
`darkMode`	`boolean`	Render the component in dark mode.	`false`
...	native `input` attributes	Any other props will be spread on the root `input` element