TextField

TextField — составной компонент для однострочного ввода текста.

Обзор

Стили TextField разделены между обёрткой и инпутом. Корень управляет высотой контейнера и состоянием поверхности, а TextFieldInput — отступами, типографикой и стилем плейсхолдера.

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

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

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

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

Корень

Обёртка задаёт --input-height по размеру и применяет состояния поверхности, фокуса, ошибки и отключённости.

Инпут

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

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

размер задаёт --input-height и типографику инпута
наведение на обёртку управляется через :has(input:hover)
фокус управляется через :has(input:focus-visible)
отключённое состояние управляется через :has(input:disabled)

Примеры

Размеры поля

Каждый size задаёт --input-height и типографику инпута. Подбирайте тот же размер соседней Button, чтобы строка выровнялась.

LTRRTL

field-sizes.tsx · 18 строк

import { Button, TextField, TextFieldInput } from '@vega-ui/react';

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

export default function FieldSizes() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)', width: '100%' }}>
      {SIZES.map((size) => (
        <div key={size} style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-4)' }}>
          <TextField size={size} style={{ flex: 1 }}>
            <TextFieldInput aria-label={`Coupon code, size ${size}`} placeholder={`Coupon code (${size})`} />
          </TextField>

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

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