Published

NumberInput

Expand code

Editable Example

import { NumberInput } from "@wfp/react";

() => {
  return (
    <NumberInput
      helperText="Optional helperText"
      labelText="The labelText"
      name="inputname"
      pattern="[0-9]+([.,][0-9]+)?"
      step={0.01}
    />
  );
};

Prop	Default	Description	Value
max `string \|number`	–	The maximum value.
min `string \|number`	–	The minimum value.
step `number`	–	Specify how much the valus should increase/decrease upon clicking on up/down button
allowEmpty `boolean`	–	`true` to allow empty string.	allowEmpty
disabled `boolean`	–	Specify if the control should be disabled, or not	disabled
id `string`	–	Specify a custom `id` for the input
helperText `string`	–	Provide text that is used alongside the control label for additional help
hideLabel `boolean`	–	Specify whether you want the underlying label to be visually hidden	hideLabel
hideControls `boolean`	–	Specify whether you want the up/down buttons to be hidden	hideControls
light `boolean`	–	`true` to use the light version.	light
pattern `string`	–	Specify the regular expression that the value should match using the html pattern attribute
onChange `(evt?: any,value?: number,direction?: string) => void`	–	The new value is available in 'imaginaryTarget.value' i.e. to get the value: evt.imaginaryTarget.value or in th second argument provided to the onChange prop
onClick `(evt?: MouseEvent<Element,MouseEvent>,value?: number,direction?: string) => void`	–	Provide an optional function to be called when the up/down button is clicked
value `string \|number`	–	Specify the value of the input, if undefined or null the value is empty
labelText `ReactNode`	–	Provide the text that will be read by a screen reader when visiting this control
formItemClassName `string`	–	Provide a custom className that is applied directly to the underlying <textarea> node
inputWrapperClassName `string`	–	Provide a custom className that is applied directly to the underlying <input> or <textarea> node
invalid `any`	–	Specify whether the control is currently invalid. Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
invalidText `any`	–	Provide the text that is displayed when the control is in an invalid state
additional `ReactNode`	–	Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label
placeholder `string`	–	Specify the placeholder attribute for the input
name `string`	–	Provide a name for the control
required `boolean`	–	Specify if the control is required (sets aria-invalid as well)	required
readOnly `boolean`	–	If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)	readOnly
inline `boolean`	–	Renders the input as inline element for horizontal forms	inline
addonBefore `ReactNode`	–	Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)
addonAfter `ReactNode`	–	Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)
components `AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage`	–	Supports replacement components

NumberInput

NumberInput

Editable Example

max

min

step

allowEmpty

disabled

id

helperText

hideLabel

hideControls

light

pattern

onChange

onClick

value

labelText

formItemClassName

inputWrapperClassName

invalid

invalidText

additional

placeholder

name

required

readOnly

inline

addonBefore

addonAfter

components

On this page

References