NumberField

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

Storybook Исходники Figma

Обзор

NumberField переиспользует поверхность TextField и добавляет числовое выравнивание и квадратные кнопки шага, привязанные к общей высоте поля ввода.

Публичные CSS-переменные

Guests

Переменная	Значение	Влияет на
сохраняет кнопки квадратными относительно полякнопки шага		В этом состоянии изменений не видно
цвет иконкикнопки шага		В этом состоянии изменений не видно
состояние наведениякнопки шага		В этом состоянии изменений не видно
активное состояниекнопки шага		В этом состоянии изменений не видно
Цвет иконки кнопки.`NumberFieldIncrementButton`, `NumberFieldDecrementButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при наведении.`NumberFieldIncrementButton`, `NumberFieldDecrementButton`		В этом состоянии изменений не видно
Цвет иконки кнопки при нажатии.`NumberFieldIncrementButton`, `NumberFieldDecrementButton`		В этом состоянии изменений не видно
Фон кнопки.`NumberFieldIncrementButton`, `NumberFieldDecrementButton`		В этом состоянии изменений не видно
Фон кнопки при наведении.`NumberFieldIncrementButton`, `NumberFieldDecrementButton`		В этом состоянии изменений не видно
Фон кнопки при нажатии.`NumberFieldIncrementButton`, `NumberFieldDecrementButton`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Корень

Корень добавляет выравнивание текста по центру через .numberTextField.

Кнопки

Кнопки увеличения и уменьшения сопоставляют --icon-button-size с --input-height.

Поле ввода

NumberFieldInput переиспользует контракт TextFieldInput и добавляет числовые атрибуты и центрированный вид.

Взаимодействие состояний и вариантов

размер берётся из унаследованных размеров текстового поля
отключённое поведение выводится из контекста корня
состояние min/max обычно влияет на отключение кнопок, а не меняет поверхность корня

Примеры

Размеры

size на корне задаёт --input-height, а кнопки шага следуют за ним и остаются квадратными при любом размере.

LTRRTL

stepper-sizes.tsx · 22 строки

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

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function StepperSizes() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)', width: '100%', maxWidth: 220 }}>

Собственные иконки кнопок шага

Дочерние элементы NumberFieldDecrementButton и NumberFieldIncrementButton заменяют их иконки по умолчанию. У кнопок с одной иконкой нет встроенного имени, поэтому передайте каждой aria-label.

LTRRTL

custom-stepper-icons.tsx · 29 строк

import {
  Icon,
  Label,
  NumberField,
  NumberFieldDecrementButton,
  NumberFieldIncrementButton,
  NumberFieldInput,
} from '@vega-ui/react';
import { ChevronDownIcon, ChevronUpIcon } from '@vega-ui/icons';
import { useId } from 'react';

export default function CustomStepperIcons() {

Не переопределяйте

не нарушайте квадратное соотношение между высотой поля и кнопками шага
не стилизуйте кнопки шага как посторонние icon button с несовпадающим размером