# NumberInput

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/numbercontrol
*Captured:* 2026-04-27T14:57:20.321Z

## NumberInput

### Example: Example 1

No default values

NumberInput in various sizes:

NumberInput with unit and inputAddon in various sizes:

m

m

m

NumberInput with limits:

days

Disabled NumberInput
m

With warning feedback Short warning message
unit

Fixed 'noDefault'
Pcs

#### React (tsx)

```tsx
import { useState } from 'react';

import NumberInput from '@rio-cloud/rio-uikit/NumberInput';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Switch from '@rio-cloud/rio-uikit/Switch';
import Divider from '@rio-cloud/rio-uikit/Divider';

export default () => {
    const [noDefault, setNoDefault] = useState(false);

    return (
        <div>
            <div className=''>
                <Switch onChange={() => setNoDefault(!noDefault)} checked={noDefault} labelPosition='left'>
                    No default values
                </Switch>
            </div>
            <Divider className='margin-bottom-10' />

            <label>NumberInput in various sizes:</label>
            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>
                <div className='form-group'>
                    <NumberInput noDefault={noDefault} bsSize='sm' className='Test' />
                </div>
                <div className='form-group'>
                    <NumberInput noDefault={noDefault} className='Test' />
                </div>
                <div className='form-group'>
                    <NumberInput noDefault={noDefault} bsSize='lg' className='Test' />
                </div>
            </div>

            <label>NumberInput with unit and inputAddon in various sizes:</label>
            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>
                <div className='form-group'>
                    <NumberInput
                        noDefault={noDefault}
                        bsSize='sm'
                        className='Test'
                        inputAddon='rioglyph rioglyph-dangerousgoods'
                        unit='m'
                    />
                </div>
                <div className='form-group'>
                    <NumberInput
                        noDefault={noDefault}
                        className='Test'
                        inputAddon='rioglyph rioglyph-dangerousgoods'
                        unit='m'
                    />
                </div>
                <div className='form-group'>
                    <NumberInput
                        noDefault={noDefault}
                        bsSize='lg'
                        className='Test'
                        inputAddon='rioglyph rioglyph-dangerousgoods'
                        unit='m'
                    />
                </div>
            </div>

            <label>NumberInput with limits:</label>
            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>
                <div className='form-group'>
                    <NumberInput
                        noDefault={noDefault}
                        min={-10}
                        max={7}
                        value={-8}
                        onChange={value => Notification.info(value)}
                    />
                </div>
                <div className='form-group'>
                    <NumberInput noDefault={noDefault} min={100} max={200} value={142} unit={<span>days</span>} />
                </div>
                <div className='form-group'>
                    <NumberInput noDefault={noDefault} min={0.001} max={1} value={0.025} />
                </div>
            </div>

            <div className='display-grid gap-15 grid-cols-1-xs grid-cols-3-sm'>
                <div className='form-group'>
                    <label>Disabled NumberInput</label>
                    <NumberInput noDefault={noDefault} unit='m' disabled />
                </div>

                <div>
                    <label htmlFor='warning-input'>With warning feedback</label>
                    <div className='form-group has-feedback has-warning'>
                        <NumberInput
                            id='warning-input'
                            value={123}
                            unit='unit'
                            warningMessage='Short warning message'
                        />
                    </div>
                </div>

                <div>
                    <label htmlFor='no-default'>Fixed 'noDefault'</label>
                    <NumberInput id='no-default' unit='Pcs' noDefault />
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="">
        <div class="uikit-switch">
            <label class="switch-label uikit-switch label-position-left display-inline-flex height-20">
                <input type="checkbox" class="switch-input">
                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
                <div class="switch-text-wrapper user-select-none padding-top-1">No default values</div>
            </label>
        </div>
    </div>
    <div class="Divider position-relative width-100pct margin-bottom-10" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <label>NumberInput in various sizes:</label>
    <div class="display-grid gap-15 grid-cols-1-xs grid-cols-3-sm">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-sm Test" aria-label="number-input" value="0">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls Test" aria-label="number-input" value="0">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group input-group-lg">
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-lg Test" aria-label="number-input" value="0">
                </div>
            </div>
        </div>
    </div>
    <label>NumberInput with unit and inputAddon in various sizes:</label>
    <div class="display-grid gap-15 grid-cols-1-xs grid-cols-3-sm">
        <div class="form-group">
            <div class="input-group input-group-sm">
                <div class="input-group-addon">
                    <span class="rioglyph rioglyph-dangerousgoods">
                    </span>
                </div>
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-sm padding-right-5 Test" aria-label="number-input" value="0">
                </div>
                <div class="input-group-addon ">m</div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    <span class="rioglyph rioglyph-dangerousgoods">
                    </span>
                </div>
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5 Test" aria-label="number-input" value="0">
                </div>
                <div class="input-group-addon ">m</div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group input-group-lg">
                <div class="input-group-addon">
                    <span class="rioglyph rioglyph-dangerousgoods">
                    </span>
                </div>
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-lg padding-right-5 Test" aria-label="number-input" value="0">
                </div>
                <div class="input-group-addon ">m</div>
            </div>
        </div>
    </div>
    <label>NumberInput with limits:</label>
    <div class="display-grid gap-15 grid-cols-1-xs grid-cols-3-sm">
        <div class="form-group">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="-10" max="7" class="form-control no-controls" aria-label="number-input" value="-8">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="100" max="200" class="form-control no-controls padding-right-5" aria-label="number-input" value="142">
                </div>
                <div class="input-group-addon ">
                    <span>days</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0.001" max="1" class="form-control no-controls" aria-label="number-input" value="0.025">
                </div>
            </div>
        </div>
    </div>
    <div class="display-grid gap-15 grid-cols-1-xs grid-cols-3-sm">
        <div class="form-group">
            <label>Disabled NumberInput</label>
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" disabled="" aria-label="number-input" value="0">
                </div>
                <div class="input-group-addon disabled pointer-events-none">m</div>
            </div>
        </div>
        <div>
            <label for="warning-input">With warning feedback</label>
            <div class="form-group has-feedback has-warning">
                <div class="input-group">
                    <div class="form-control-feedback-wrapper">
                        <input id="warning-input" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" value="123">
                        <span class="form-control-feedback rioglyph rioglyph-warning-sign">
                        </span>
                        <span class="help-block white-space-normal">
                            <span>Short warning message</span>
                        </span>
                    </div>
                    <div class="input-group-addon ">unit</div>
                </div>
            </div>
        </div>
        <div>
            <label for="no-default">Fixed 'noDefault'</label>
            <div class="input-group">
                <div class="form-control-feedback-wrapper">
                    <input id="no-default" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="">
                </div>
                <div class="input-group-addon ">Pcs</div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | A native input id attribute. Passed through as HTML attribute to the input element. |
| min | number | 0 | The minimum value of the input. |
| max | number | Number.MAX_VALUE | The maximum value of the input. |
| value | number | 0 | The initial value of the input. Used to control the component from the outside. |
| noDefault | boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
| step | number | 1 | The size of increment or decrement (only works with number type). |
| disabled | boolean | false | Enables or disabled the input. |
| onChange | (value?: number) => void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |
| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | — | Callback function that gets triggered after filtering out invalid keystrokes. |
| bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. |
| unit | string \| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |
| inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |
| errorMessage | string \| React.ReactNode | — | Input error message. |
| warningMessage | string \| React.ReactNode | — | Input warning message. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
| controls | React.ReactNode | — | This prop is used by the NumberControl component to pass on the +/- spinner controls. |
| placeholder | string | — | The input placeholder if no value is given. |
| digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |
| className | string | — | Additional classes to be set on the component. |

## NumberControl

### Example: Example 2

NumberControl with limits and various step sizes:

m

NumberControl without default value

NumberControl in large and small:

days

m

NumberControl with error feedback Very long error message with nowrap messageWhiteSpace prop
unit

#### React (tsx)

```tsx
import NumberControl from '@rio-cloud/rio-uikit/NumberControl';
import Notification from '@rio-cloud/rio-uikit/Notification';

export default () => (
    <div className='display-flex flex-column gap-20'>
        <div>
            <label>NumberControl with limits and various step sizes:</label>
            <div className='display-flex flex-wrap gap-15'>
                <div className='width-150'>
                    <NumberControl value={0} />
                </div>
                <div className='width-150'>
                    <NumberControl
                        min={-5}
                        max={30}
                        value={1}
                        step={2}
                        unit='m'
                        inputAddon='rioglyph rioglyph-dangerousgoods'
                        onChange={(value: number | undefined) => Notification.info(value)}
                    />
                </div>
                <div className='width-150'>
                    <NumberControl min={0} value={0.001} step={0.001} />
                </div>
                <div className='width-200'>
                    <NumberControl placeholder='Please enter a number' />
                </div>
            </div>
        </div>

        <div>
            <div className='width-200'>
                <label htmlFor='no-default'>NumberControl without default value</label>
                <NumberControl id='no-default' noDefault />
            </div>
        </div>

        <div>
            <label>NumberControl in large and small:</label>
            <div className='display-flex flex-wrap gap-15'>
                <div className='width-200'>
                    <NumberControl
                        bsSize='lg'
                        min={100}
                        max={200}
                        value={142}
                        inputAddon='rioglyph rioglyph-dangerousgoods'
                        unit={<span>days</span>}
                    />
                </div>
                <div className='width-150'>
                    <NumberControl min={-1000} value={10} step={10} bsSize='sm' unit='m' />
                </div>
                <div className='width-150'>
                    <NumberControl bsSize='sm' disabled />
                </div>
            </div>
        </div>

        <div className='width-200'>
            <label htmlFor='error-input'>NumberControl with error feedback</label>
            <div className='form-group has-feedback has-error'>
                <NumberControl
                    id='error-input'
                    value={123}
                    unit='unit'
                    errorMessage='Very long error message with nowrap messageWhiteSpace prop'
                    messageWhiteSpace='nowrap'
                />
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex flex-column gap-20">
    <div>
        <label>NumberControl with limits and various step sizes:</label>
        <div class="display-flex flex-wrap gap-15">
            <div class="width-150">
                <div class="NumberControl">
                    <div class="input-group">
                        <div class="form-control-feedback-wrapper">
                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="0">
                        </div>
                        <div class="input-group-addon ">
                            <div class="display-flex padding-left-10">
                                <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                    <div class="rioglyph rioglyph-minus scale-90">
                                    </div>
                                </div>
                                <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                    <div class="rioglyph rioglyph-plus scale-90">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="width-150">
                <div class="NumberControl">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <span class="rioglyph rioglyph-dangerousgoods">
                            </span>
                        </div>
                        <div class="form-control-feedback-wrapper">
                            <input type="number" step="2" min="-5" max="30" class="form-control no-controls padding-right-5" aria-label="number-input" value="1">
                        </div>
                        <div class="input-group-addon ">m<div class="display-flex padding-left-10">
                                <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                    <div class="rioglyph rioglyph-minus scale-90">
                                    </div>
                                </div>
                                <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                    <div class="rioglyph rioglyph-plus scale-90">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="width-150">
                <div class="NumberControl">
                    <div class="input-group">
                        <div class="form-control-feedback-wrapper">
                            <input type="number" step="0.001" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="0.001">
                        </div>
                        <div class="input-group-addon ">
                            <div class="display-flex padding-left-10">
                                <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                    <div class="rioglyph rioglyph-minus scale-90">
                                    </div>
                                </div>
                                <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                    <div class="rioglyph rioglyph-plus scale-90">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="width-200">
                <div class="NumberControl">
                    <div class="input-group">
                        <div class="form-control-feedback-wrapper">
                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" placeholder="Please enter a number" value="">
                        </div>
                        <div class="input-group-addon ">
                            <div class="display-flex padding-left-10">
                                <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                    <div class="rioglyph rioglyph-minus scale-90">
                                    </div>
                                </div>
                                <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                    <div class="rioglyph rioglyph-plus scale-90">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="width-200">
            <label for="no-default">NumberControl without default value</label>
            <div class="NumberControl">
                <div class="input-group">
                    <div class="form-control-feedback-wrapper">
                        <input id="no-default" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="">
                    </div>
                    <div class="input-group-addon ">
                        <div class="display-flex padding-left-10">
                            <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                <div class="rioglyph rioglyph-minus scale-90">
                                </div>
                            </div>
                            <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                <div class="rioglyph rioglyph-plus scale-90">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <label>NumberControl in large and small:</label>
        <div class="display-flex flex-wrap gap-15">
            <div class="width-200">
                <div class="NumberControl">
                    <div class="input-group input-group-lg">
                        <div class="input-group-addon">
                            <span class="rioglyph rioglyph-dangerousgoods">
                            </span>
                        </div>
                        <div class="form-control-feedback-wrapper">
                            <input type="number" step="1" min="100" max="200" class="form-control no-controls input-lg padding-right-5" aria-label="number-input" value="142">
                        </div>
                        <div class="input-group-addon ">
                            <span>days</span>
                            <div class="display-flex padding-left-10">
                                <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                    <div class="rioglyph rioglyph-minus scale-90">
                                    </div>
                                </div>
                                <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                    <div class="rioglyph rioglyph-plus scale-90">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="width-150">
                <div class="NumberControl">
                    <div class="input-group input-group-sm">
                        <div class="form-control-feedback-wrapper">
                            <input type="number" step="10" min="-1000" max="1.7976931348623157e+308" class="form-control no-controls input-sm padding-right-5" aria-label="number-input" value="10">
                        </div>
                        <div class="input-group-addon ">m<div class="display-flex padding-left-10">
                                <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                    <div class="rioglyph rioglyph-minus scale-90">
                                    </div>
                                </div>
                                <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                    <div class="rioglyph rioglyph-plus scale-90">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="width-150">
                <div class="NumberControl">
                    <div class="input-group input-group-sm">
                        <div class="form-control-feedback-wrapper">
                            <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls input-sm padding-right-5" disabled="" aria-label="number-input" value="0">
                        </div>
                        <div class="input-group-addon disabled pointer-events-none">
                            <div class="display-flex padding-left-10">
                                <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                    <div class="rioglyph rioglyph-minus scale-90">
                                    </div>
                                </div>
                                <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                    <div class="rioglyph rioglyph-plus scale-90">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="width-200">
        <label for="error-input">NumberControl with error feedback</label>
        <div class="form-group has-feedback has-error">
            <div class="NumberControl">
                <div class="input-group">
                    <div class="form-control-feedback-wrapper">
                        <input id="error-input" type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls" aria-label="number-input" value="123">
                        <span class="form-control-feedback rioglyph rioglyph-error-sign">
                        </span>
                        <span class="help-block white-space-nowrap">
                            <span>Very long error message with nowrap messageWhiteSpace prop</span>
                        </span>
                    </div>
                    <div class="input-group-addon ">unit<div class="display-flex padding-left-10">
                            <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                <div class="rioglyph rioglyph-minus scale-90">
                                </div>
                            </div>
                            <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                <div class="rioglyph rioglyph-plus scale-90">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | A native input id attribute. Passed through as HTML attribute to the input element. |
| min | number | 0 | The minimum value of the input. |
| max | number | Number.MAX_VALUE | The maximum value of the input. |
| value | number | 0 | The initial value of the input. Used to control the component from the outside. |
| noDefault | boolean | false | Lets you omit the default value of "0" when the vale is not defined. The input will be empty in this case. |
| step | number | 1 | The size of increment or decrement (only works with number type). |
| disabled | boolean | false | Enables or disabled the input. |
| onChange | (value?: number) => void | — | Callback function triggered when the input value changes. When the value is removed by the user, the input is kept empty, but it triggers the callback without any value since the user has finished his input. |
| onKeyDown | (event: React.KeyboardEvent<HTMLInputElement>) => void | — | Callback function that gets triggered after filtering out invalid keystrokes. |
| bsSize | 'sm' \| 'md' \| 'lg' | 'md' | Defines the size of the input to be rendered. |
| unit | string \| React.ReactNode | — | A unit for this value. This will be shown in a dedicated input addon. |
| inputAddon | string | — | A rioglyph icon tio be shown in front of the input. |
| errorMessage | string \| React.ReactNode | — | Input error message. |
| warningMessage | string \| React.ReactNode | — | Input warning message. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Feedback message width. |
| controls | React.ReactNode | — | This prop is used by the NumberControl component to pass on the +/- spinner controls. |
| placeholder | string | — | The input placeholder if no value is given. |
| digitPrecision | number | 3 | Number of digits after the comma the value should be fixed to. |
| className | string | — | Additional classes to be set on the component. |