PinField

PinField — составной компонент для кодов фиксированной длины, таких как одноразовые коды (OTP) и PIN.

Обзор

Стили PinField разделены между сеткой слотов, видимыми слотами и необязательным разделителем. PinFieldInput визуально скрыт и не задаёт контракт поверхности.

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

Переменная	Значение	Влияет на
базовый размер слотаслот		В этом состоянии изменений не видно
коэффициент скругления слотаслот		В этом состоянии изменений не видно
поверхность слота по умолчаниюслот		В этом состоянии изменений не видно
поверхность слота при наведениислот		В этом состоянии изменений не видно
активный контурактивный слот		В этом состоянии изменений не видно
контур ошибкислот с ошибкой		В этом состоянии изменений не видно
цвет разделителя группразделитель		В этом состоянии изменений не видно
Высота каретки в активном слоте.`PinFieldSlot`		В этом состоянии изменений не видно

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

Переменные частей

Корень

Корень — flex-строка, расставляющая слоты с gap: var(--spacing-3).

Слот

Слоты переводят размер и в квадратные габариты, и в шкалу шрифта, а в активном состоянии с плейсхолдером рендерят мигающую каретку.

Разделитель

Разделитель использует токены ширины для конкретного размера и линию толщиной 1px.

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

размер меняет габариты слота и шкалу шрифта
активное состояние меняет цвет контура
состояние плейсхолдера меняет цвет текста в слоте
отключённое состояние и состояние ошибки переназначают цвета слотов, не меняя раскладку

Примеры

Сгруппированные слоты одноразового кода

Каждый слот сам задаёт --input-br-ratio, поэтому переопределение ставится на слоты, а промежуток — обычный CSS на корне.

LTRRTL

grouped-otp-slots.tsx · 19 строк

import type { CSSProperties } from 'react';
import { PinField, PinFieldInput, PinFieldSeparator, PinFieldSlot } from '@vega-ui/react';

const roundSlot = { '--input-br-ratio': 0.5 } as CSSProperties;

export default function GroupedOtpSlots() {
  return (
    <PinField size='lg' maxLength={6} style={{ gap: 'var(--spacing-6)' }}>
      <PinFieldInput aria-label='Sign-in code' autoComplete='one-time-code' />
      <PinFieldSlot index={0} style={roundSlot} />
      <PinFieldSlot index={1} style={roundSlot} />
      <PinFieldSlot index={2} style={roundSlot} />

Чего не переопределять

не нарушайте квадратное соотношение ширины и высоты слота
не стилизуйте разделители так, будто это редактируемые слоты
не скрывайте состояния активного фокуса и контура