NumberField

Паттерны

Счётчик количества

Когда использовать:

• компактной строке нужно точное управление количеством

Заметки по композиции:

• размещайте кнопки уменьшения и увеличения по разные стороны от input
• задавайте реалистичные min и max

Компромиссы:

• точно и компактно
• плотнее, чем простое текстовое поле

import {
  NumberField,
  NumberFieldDecrementButton,
  NumberFieldIncrementButton,
  NumberFieldInput,
  Text,
} from '@vega-ui/react';
import { useState } from 'react';

interface LineItem {
  sku: string;
  name: string;

Дробная настройка

Когда использовать:

• цены, проценты или измерения требуют малых приращений

Заметки по композиции:

• осознанно задавайте step и maximumFractionDigits
• проверяйте округление на реальных значениях

Компромиссы:

• точно
• более хрупко, чем сценарии только с целыми числами

import {
  Label,
  NumberField,
  NumberFieldDecrementButton,
  NumberFieldIncrementButton,
  NumberFieldInput,
  Text,
} from '@vega-ui/react';
import { useId, useState } from 'react';

const LIST_PRICE = 1290;
export const locales = ['en-US', 'ru-RU', 'ar-EG', 'he-IL'];

Числовая строка, удобная для форм

Когда использовать:

• нативная форма должна отправлять значение напрямую

Заметки по композиции:

• задавайте name на NumberFieldInput
• явно выбирайте модель значения: по умолчанию или контролируемую

Компромиссы:

• простая нативная отправка
• по-прежнему нужна валидация на бэкенде

import {
  Button,
  Label,
  NumberField,
  NumberFieldDecrementButton,
  NumberFieldIncrementButton,
  NumberFieldInput,
  Text,
} from '@vega-ui/react';
import { FormEvent, useId, useState } from 'react';

export default function FormSubmitAndReset() {

Сравнение

Быстрое правило выбора

Используйте NumberField, когда важны границы, шаг или исключительно числовое взаимодействие. Используйте TextField, когда значение — свободный текст, даже если в нём есть цифры.

NumberField или TextField

Используйте NumberField, когда:

• значение — настоящая величина, количество, цена или ограниченная числовая сумма

Используйте TextField, когда:

• значение — идентификатор, номер телефона, код или другой текст с цифрами

NumberField или Slider

Используйте NumberField, когда:

• важен точный ввод числа

Используйте Slider, когда:

• быстрая приблизительная настройка важнее точного ввода

Выбирайте этот компонент, когда

• пользователь может вводить точные числа или менять их по шагу
• важны min, max и step
• одно и то же значение должно редактироваться и вводом, и кнопками без расхождения в семантике

Не выбирайте этот компонент, когда

• значение на самом деле не числовое
• взаимодействие должно быть приблизительным и в первую очередь жестовым

Решение проблем

Значение неожиданно прыгает при вводе

Симптом

Пользователь вводит число, но промежуточное значение ведёт себя нестабильно.

Вероятная причина

Во время промежуточных состояний редактирования ввод обрабатывается как полностью разобранное число.

Как проверить

• введите частичные значения, например -, 1. или пустую строку
• посмотрите, как реагирует состояние родителя

Исправление

Допускайте промежуточные строковые состояния при вводе и разбирайте значение только в подходящий момент.

Кнопки шага и введённое значение расходятся

Симптом

В поле можно вводить и менять значение по шагу, но эти два способа взаимодействия не остаются синхронизированными.

Вероятная причина

Пользовательская логика родителя обходит собственную модель шага и границ корня.

Как проверить

• сравните изменения вводом и нажатиями кнопок в одном и том же поле

Исправление

Используйте один источник истины и оставьте логику шага корня главной.

Колесо мыши неожиданно меняет значение

Симптом

Прокрутка над элементом управления меняет число, хотя пользователь хотел только прокрутить страницу.

Вероятная причина

changeOnWheel включён в контексте, где изменение колесом неожиданно.

Как проверить

• переведите фокус на поле и прокрутите над ним

Исправление

Отключите changeOnWheel в этой интеграции или уберите элемент управления из областей с активной прокруткой.