semantic-ui-react-numberinput

Numeric input control with step buttons for Semantic UI React

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

property	description
allowEmptyValue	Specifies if value can be empty
allowMouseWheel	Specifies if mouse wheel can used to change input value
buttonPlacement	Specifies how step buttons are placed
id	id for HTML outer div element
className	class name(s) for HTML outer div element
defaultValue	Specifies default value to be used when value is empty (must be integer or decimal number depending on valueType)
disabled	Specifies if NumberInput is disabled
doubleClickStepAmount	Specifies how much double click of a button increments/decrements the value, zero value disables double click feature
minValue	Minimum value accepted for NumberInput (must be integer or decimal number depending on valueType)
maxValue	Maximum value accepted for NumberInput (must be integer or decimal number depending on valueType)
maxLength	Maximum length of HTML input value (must be a positive integer)
placeholder	Placeholder text for input element when value is empty, applicable only when allowEmptyValue is true
precision	Decimal number precision when valueType is 'decimal'
showError	Specifies if HTML input element should show error style
showTooltips	Specifies if tooltips are shown
size	Specifies the size of the control
stepAmount	Specifies how much buttons increment/decrement the value (must be a positive integer or decimal number depending on valueType)
valueType	Specifies 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

Key	Action
ArrowUp	Increments value by stepAmount
ArrowDown	Decrements value by stepAmount
+	Increments value by stepAmount
-	Decrements value by stepAmount
PageUp	Increments value by doubleClickStepAmount
PageDown	Decrements value by doubleClickStepAmount
Ctrl + ArrowUp	Increments value by doubleClickStepAmount
Ctrl + ArrowDown	Decrements value by doubleClickStepAmount
Ctrl + +	Increments value by doubleClickStepAmount
Ctrl + -	Decrements value by doubleClickStepAmount

Styling example

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

• Scrollbar
• Date Time Input
• Slider
• Text Input with integrated label
• Line style Text Input