input

Numeric input control with step buttons for Semantic UI React

Sep 21, 2021
Numeric input control with step buttons for Semantic UI React

semantic-ui-react-numberinput

Numeric input control with step buttons for Semantic UI React.

View Demo View Github

Example image of numberInput

Example image of numberInput

Prerequisites

"react": "^16.0.0", "react-dom": "^16.0.0", "semantic-ui-react": "^0.87.0"

Installation

npm install --save semantic-ui-react-numberinput

Demo

NumberInput demo

Example usage

import React from 'react'; import NumberInput from 'semantic-ui-react-numberinput'; class NumberInputExample extends React.Component { constructor(props) { super(props); this.state = { value: '0' }; } changeValue = (newValue) => { this.setState({ value: newValue }); } render() => {( <NumberInput value={this.state.value} onChange={this.changeValue} /> )}; }

Render NumberInput with step buttons on left and right side of the input (this is default behavior, if buttonPlacement is not specified)

<NumberInput buttonPlacement="leftAndRight" value={this.state.value} onChange={this.changeValue} />

Render NumberInput with step buttons on the right side of the input

<NumberInput buttonPlacement="right" value={this.state.value} onChange={this.changeValue} />

Specify allowed number range to be between 0 and 100

<NumberInput minValue={0} maxValue={100} value={this.state.value} onChange={this.changeValue} />

Specify buttons to increment/decrement by 5

<NumberInput stepAmount={5} value={this.state.value} onChange={this.changeValue} />

Specify decimal NumberInput with increment/decrement step of 0.25 and default precision of 2

<NumberInput valueType="decimal" stepAmount={0.25} value={this.state.value} onChange={this.changeValue} />

Specify decimal NumberInput with increment/decrement step of 0.1 and precision of 1

<NumberInput valueType="decimal" stepAmount={0.1} precision={1} value={this.state.value} onChange={this.changeValue} />

More examples in demo/demo.js file

Mandatory NumberInput properties

value: string, // must be parseable to integer or decimal number depending on valueType onChange: (newValue: string) => void,

Optional NumberInput properties

propertydescription
allowEmptyValueSpecifies if value can be empty
allowMouseWheelSpecifies if mouse wheel can used to change input value
buttonPlacementSpecifies how step buttons are placed
idid for HTML outer div element
classNameclass name(s) for HTML outer div element
defaultValueSpecifies default value to be used when value is empty (must be integer or decimal number depending on valueType)
disabledSpecifies if NumberInput is disabled
doubleClickStepAmountSpecifies how much double click of a button increments/decrements the value, zero value disables double click feature
minValueMinimum value accepted for NumberInput (must be integer or decimal number depending on valueType)
maxValueMaximum value accepted for NumberInput (must be integer or decimal number depending on valueType)
maxLengthMaximum length of HTML input value (must be a positive integer)
placeholderPlaceholder text for input element when value is empty, applicable only when allowEmptyValue is true
precisionDecimal number precision when valueType is 'decimal'
showErrorSpecifies if HTML input element should show error style
showTooltipsSpecifies if tooltips are shown
sizeSpecifies the size of the control
stepAmountSpecifies how much buttons increment/decrement the value (must be a positive integer or decimal number depending on valueType)
valueTypeSpecifies if value is integer or decimal number

Optional NumberInput property types

allowEmptyValue: boolean, allowMouseWheel: boolean, buttonPlacement: 'right' | 'leftAndRight' | 'none', id: string, className: string, defaultValue: number, disabled: boolean, doubleClickStepAmount: number, minValue: number, maxValue: number, maxLength: number, placeholder: string, precision: number, showError: boolean, showTooltips: boolean, size: 'mini' | 'small' | 'large' | 'big' | 'huge' | 'massive', stepAmount: number, valueType: 'integer' | 'decimal'

Default values for optional properties

allowEmptyValue: false, allowMouseWheel: false, buttonPlacement: 'leftAndRight', id: undefined, className: undefined, defaultValue: undefined, disabled: false, doubleClickStepAmount: 0, minValue: 0, maxValue: 9999999999, maxLength: 10, placeholder: 'Enter a value', precision: 2, showError: false, showTooltips: true, size: 'small', stepAmount: 1, valueType: 'integer'

Keyboard actions

KeyAction
ArrowUpIncrements value by stepAmount
ArrowDownDecrements value by stepAmount
+Increments value by stepAmount
-Decrements value by stepAmount
PageUpIncrements value by doubleClickStepAmount
PageDownDecrements value by doubleClickStepAmount
Ctrl + ArrowUpIncrements value by doubleClickStepAmount
Ctrl + ArrowDownDecrements value by doubleClickStepAmount
Ctrl + +Increments value by doubleClickStepAmount
Ctrl + -Decrements value by doubleClickStepAmount

Styling example

Example image of numberInput

styles.css

.numberInput .ui.button { background-color: red; border-radius: 0 !important; color: white; } .numberInput .ui.input > input { border-color: red; color: red; font-weight: bold; width: 50px; }

Applying CSS using className

<NumberInput className="numberInput" value={this.state.value} onChange={this.changeValue} />

License

MIT License

My other Semantic UI React components

Recommended