Field

Field объединяет подпись, поле ввода и пояснение в один блок - эти три части всегда идут вместе, отдельно label или input в системе не используются.

Поведение

Обводка поля - line в состоянии покоя, signal при фокусе. Радиус - md (12px), как у кнопок: поля и кнопки одной строки визуально согласованы по высоте и скруглению. Кольцо фокуса строится через outline, не через увеличение толщины обводки - переключение состояния не двигает геометрию поля.

Hint отображается всегда, если он задан, и связан с полем через aria-describedby - скринридер объявляет его вместе с полем, а не только визуально рядом. Место под hint зарезервировано заранее, поэтому его появление не сдвигает соседние элементы формы.

Разметка

<div class="field">
  <label class="field-label" for="package-name">Имя пакета</label>
  <input class="field-control" id="package-name" name="package-name" placeholder="nuros-example" aria-describedby="package-name-hint" />
  <p class="field-hint" id="package-name-hint">Строчными буквами, через дефис</p>
</div>

.field-control {
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
}

.field-hint {
  min-height: 1.4em;
}

.field-control:focus-visible {
  border-color: var(--color-link);
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}