Number Input

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/number-input

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 | 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<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. | | | darkMode | boolean | Render the component in dark mode. | false | | ... | native input attributes | Any other props will be spread on the root input element | |