Определение

Number input — поле формы, предназначенное для ввода пользователем числового значения, которое осуществляется с помощью клавиатуры или кнопок +/-. Поле ввода number input принимает только числовые значения и отклоняет всё остальное содержимое.

Варианты и состояния

Number input может иметь 3 вида отображения:

• числовое поле без единицы измерения – используется, когда единица измерения очевидна или упомянута в лейбле;
• поле с суффиксом внутри, в котором текстом суффикса является единица измерения;
• комбинированное поле ввода с select-ом, где можно выбрать единицу измерения.

Основные правила

В поле Number input можно:

• установить верхний и нижний предел для ввода, что ограничивает значение в указанном диапазоне (например, если указан диапазон от 10 до 15, то пользователь сможет выбрать одно из значений: 10, 11, 12, 13, 14, 15);
• установить размер шага при увеличении или уменьшении значения (например, 10, 20, 30 и т. д.);
• регулировать точность значения – данная потребность может возникнуть, когда необходимо выбрать значение с точностью до десятичных знаков (например, 0.2 , 0.4, 0.6 и т.д.);
• увеличивать и уменьшать значения с помощью колеса мыши/стрелок вверх и вниз на клавиатуре;
• обновлять значение через определенные промежутки времени при длительным нажатием кнопок вверх и вниз;
• увеличивать и уменьшать значения с помощью клавиатуры, при этом, если введенное значение меньше минимального или больше максимального, то значение сбрасывается, когда поле теряет фокус.

Построение

• Радиус скругления всех полей равен по-умолчанию 4px.
• Соблюдение отступов внутри и снаружи — обязательное условие.