NumberInput

import {NumberInput} from '@gravity-ui/uikit';

NumberInput allow users to enter numbers into a UI.

§Appearance

The appearance of NumberInput is controlled by the view and pin properties.

§View

normal - the main view of NumberInput (used by default).

<NumberInput placeholder="Placeholder" />

clear - can be used with a custom wrapper for NumberInput.

<NumberInput view="clear" placeholder="Placeholder" />

§Pin

Allows you to control view of right and left edges of NumberInput's border.

<NumberInput placeholder="Placeholder" pin="round-brick" />
<NumberInput placeholder="Placeholder" pin="brick-brick" />
<NumberInput placeholder="Placeholder" pin="brick-round" />

§States

§Disabled

The state of the NumberInput where you don't want the user to be able to interact with the component.

<NumberInput placeholder="Placeholder" disabled={true} />

§Error

The state of the NumberInput in which you want to indicate incorrect user input. To change NumberInput appearance, use the validationState property with the "invalid" value. An optional message text can be added via the errorMessage property. By default, message text is rendered outside the component. This behaviour can be changed with the errorPlacement property.

<NumberInput placeholder="Placeholder" errorMessage="Error message" validationState="invalid" />
<NumberInput placeholder="Placeholder" errorPlacement="inside" errorMessage="Error message" validationState="invalid" />

§Size

s – Used when standard controls are too big (tables, small cards).

m – Basic size, used in most components.

l – Basic controls performed in a page's header, modal windows, or pop-ups.

xl – Used on promo and landing pages.

<NumberInput placeholder="Placeholder" size="s" />
<NumberInput placeholder="Placeholder" size="m" />
<NumberInput placeholder="Placeholder" size="l" />
<NumberInput placeholder="Placeholder" size="xl" />

§Label

Allows you to set the label to the left of control.

• label is located to the right of the elements added via startContent property.
• label can take up no more than half the width of the entire NumberInput's space.

<NumberInput placeholder="Placeholder" label="Label" />
<NumberInput placeholder="Placeholder" label="Very long label with huge amount of symbols" />

§Additional content

§Start content

Allows you to add content to the left of the control. Located to the left of the label added via label property.

<NumberInput placeholder="Placeholder" label="Label" startContent={<Label size="s">Start</Label>} />

§End content

Allows you to add content to the right of the control. Located to the right of the clear button added via hasClear property and inside-placed error icon.

<NumberInput placeholder="Placeholder" endContent={<Label size="s">Right</Label>} hasClear/>

§Controls

Visibility of incrementing/decrementing arrow-controls in the rightmost position in the component can be managed by hiddenControls property.

<NumberInput/>
    <NumberInput hiddenControls/>

§Behaviour

§Min/max values

Allow you to set minimum and maximum values, which can be entered to the input. Values which are not fit into defined range would be clamped on blur to the nearest allowed value.

<NumberInput min={-100} max={100}/>

§Step

Allows you to set the amount on which value in the input is incremented or decremented with arrow buttons in component controls or on keyboard.

It also adds restrictions on allowed values and enabled clamping entered number on blur to allowed values by the following rules:

• if step and min value are defined with integer values, then allowed values are defined as min + (step * n), where n is an integer number;
• if step is an integer number and min value is not defined, then allowed values are defined as a divisible by step;
• if step or min values are decimal, then clamping is not applicable

<NumberInput min={-10} step={4}/>

§Step multiplier

Allows you to set the value by which the step value is multiplied when the Shift button on the keyboard is pressed by defining shiftMultiplier property.

<NumberInput shiftMultiplier={50}/>
    <NumberInput shiftMultiplier={8} step={4}/>

§Decimal values restriction

Allows you to switch ability to enter only integer or also decimal values by allowDecimal property. With allowDecimal={false} property a dot entered to the input would be ignored and pasted decimal values would be rounded down.

<NumberInput allowDecimal/>
    <NumberInput allowDecimal={false}/>

§Properties

§CSS API

Component does not have its own css api, but it extends parent TextInput component api