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} />
    )};
}
React JSX

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} />
React JSX

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

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

Specify allowed number range to be between 0 and 100

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

Specify buttons to increment/decrement by 5

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

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} />
React JSX

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} />
React JSX

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'
Ts

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'
Js

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

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;
}
CSS

Applying CSS using className

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

License

MIT License

My other Semantic UI React components