Number Input

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 | |