HelperText

HelperText рендерит поясняющий текст к полю: подсказки, указания по использованию и сообщения рядом с валидацией.

Обзор

HelperText использует общую текстовую систему с небольшим локальным контрактом цвета.

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

Password

At least 8 characters.

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

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

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

Корень

Корень задаёт display: inline-block и меняет цвет в зависимости от data-error.

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

обычное состояние использует --label-tertiary
error использует --color-error
размер шрифта по-прежнему берётся из соответствия размеров Text, выбранного маппером размеров вспомогательного текста

Примеры

Размеры и тон ошибки

size сопоставляется со шкалой текста (sm, md, lg); error меняет цвет с --label-tertiary на --color-error при любом размере.

LTRRTL

helper-text-sizes.tsx · 16 строк

import { HelperText } from '@vega-ui/react';

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

export default function HelperTextSizes() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)' }}>
      {SIZES.map((size) => (
        <div key={size} style={{ display: 'grid', gap: 'var(--spacing-1)' }}>
          <HelperText size={size}>Hint, {size}: shown to all members of the workspace.</HelperText>
          <HelperText size={size} error>Error, {size}: this name is already in use.</HelperText>
        </div>

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

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