Label

Label — семантический примитив подписи для полей формы.

Обзор

У Label минимальный локальный контракт стилей. Типографику он в основном наследует от Text и добавляет только display: inline-block.

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

Собственных публичных локальных переменных --label-* у Label нет.

Компонент наследует модель токенов Text, в том числе:

Work email

Переменная	Значение	Влияет на
базовое семейство шрифтов подписиоснова `Text`		В этом состоянии изменений не видно
читаемый цвет подписиунаследованный цвет текста		В этом состоянии изменений не видно
соответствие размеров подписишкала размеров	—	—
соответствие межстрочного интервала подписишкала размеров	—	—

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

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

Корень

Сам Label задаёт только display: inline-block. Типографика берётся из Text.

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

визуальный размер наследуется от data-атрибутов размера текста
отдельных стилей для отключённого состояния или ошибки на корне подписи нет
вид отключённого состояния обычно задаёт окружающая раскладка или связанный элемент управления

Примеры

Размеры

size сопоставляется со шкалой текста: sm, md и lg подходят к полям тех же размеров.

LTRRTL

label-sizes.tsx · 21 строка

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

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

export default function LabelSizes() {
  const id = useId();

  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-8)', width: '100%' }}>
      {SIZES.map((size) => (
        <div key={size} style={{ display: 'grid', gap: 'var(--spacing-3)' }}>

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

семантику нативного элемента подписи
стили подписей, из-за которых они становятся неотличимы от вспомогательного текста