QuantityInput

Description

Numeric input counter.

See live demos on storybook

Storybook QuantityInput Demos

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-quantity-input @element/themes

Quantity Input Props

| Name | Type | Default | Required | Description | | ---------- | ------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | alignment | string | 'right' | false | Defines whether the addition/subtraction buttons are leading or trailing. | | dense | boolean | false | false | Shrinks component vertically | | helperText | string | undefined | false | Text that appears underneath the input tracker when certain conditions are met. | | hug | boolean | true | false | Shrinks component horizontally | | icon | string | undefined | false | Icon for display within input field | | label | string | undefined | false | Text that hovers above input container. | | locale | string | 'en' | false | Determines whether to use commas for numeric expression or periods. | | multiple | number | 1 | false | Ensures input is divisble by the value passed. If multiple is 2 then odd numbers will cause the helperText to appear in a warning state. | | type | string | 'mini' | false | Defines which style of quantity input. | | value | number | 0 | false | Value of the input field |

Quantity Input Events

| Name | Default | Required | Params | Description | | -------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | | onChange | undefined | false | 1. Name: value, Type: string, Description: Updated value,2. Name: event, Type: object, Description: Default react event object. | Function to be called when changing the input value |