Label

Компонент Label является базовым элементом управления пользовательским интерфейсом, используемым для привязки текстовых описаний к интерактивным элементам, таким как input, select, textarea и другие элементы формы. Основная цель Label — обеспечить семантическую связь между элементом формы и его текстовым описанием, что важно для доступности (accessibility) и улучшения пользовательского опыта.

Основные свойства Label

  1. for Атрибут for связывает Label с конкретным элементом формы по его id. Это обеспечивает фокусировку на элементе при клике на текст метки.

    <Label for="username">Имя пользователя</Label>
<input id="username" type="text" />

  2. required Атрибут required добавляет визуальное обозначение, что поле обязательно для заполнения. В SvelteKit UI libs это обычно реализуется через добавление красочной звездочки или другой индикации:

    <Label for="email" required>Email</Label>
<input id="email" type="email" required />

  3. disabled Если элемент формы отключен, Label автоматически применяет соответствующий стиль для визуальной согласованности:

    <Label for="age" disabled>Возраст</Label>
<input id="age" type="number" disabled />

Стилизация и кастомизация

Label поддерживает гибкие подходы к стилям через классы и CSS-переменные:

  • Цвет текста:

    <Label for="name" class="text-primary">Имя</Label>

    Здесь text-primary может быть классом из Tailwind CSS или из собственной темы SvelteKit UI.

  • Размер текста и шрифт:

    <Label for="password" class="text-sm font-medium">Пароль</Label>

  • Отступы и позиционирование: Отдельные библиотеки UI позволяют управлять margin, padding и выравниванием, чтобы Label корректно располагался рядом с полем ввода.

Label как контейнер

В SvelteKit UI libs Label может выступать не только текстовой меткой, но и контейнером для вложенных элементов, что упрощает создание кастомных форм:

<Label class="flex flex-col">
  Имя пользователя
  <input type="text" class="mt-1 border rounded" />
</Label>

Такой подход улучшает читаемость кода и позволяет стилизовать Label вместе с элементом формы единообразно.

Доступность и ARIA

  • ARIA attributes: Если стандартного for недостаточно (например, при сложной кастомизации), Label поддерживает добавление ARIA-атрибутов:

    <Label aria-label="Имя пользователя">Имя</Label>

  • Фокусировка: При клике на Label фокус автоматически перемещается на связанный элемент формы, что критично для навигации с клавиатуры.

Интеграция с другими компонентами SvelteKit UI

Label часто используется совместно с компонентами Input, Checkbox, RadioButton, Select. Пример комплексного использования:

<div class="form-group">
  <Label for="newsletter">Подписка на новости</Label>
  <Checkbox id="newsletter" />
</div>

<div class="form-group">
  <Label for="gender">Пол</Label>
  <RadioButton id="male" name="gender" value="male">Мужской</RadioButton>
  <RadioButton id="female" name="gender" value="female">Женский</RadioButton>
</div>

Такое использование обеспечивает единство визуального стиля и правильную семантику формы.

Динамические Label

Label в SvelteKit UI libs можно обновлять динамически, используя реактивность Svelte:

<script>
  let username = '';
</script>

<Label for="username">
  {username ? `Имя пользователя: ${username}` : 'Введите имя'}
</Label>
<input id="username" bind:value={username} type="text" />

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

Практические советы

  • Всегда использовать for для простых форм — это улучшает доступность.
  • Объединение Label с flex или grid контейнерами упрощает выравнивание меток и полей ввода.
  • Кастомные компоненты формы стоит оборачивать в Label для сохранения семантики и фокусировки.
  • Тестировать с экранными читалками — Label является критическим элементом доступности.

Использование Label в SvelteKit UI libs позволяет создавать чистые, семантически правильные формы с гибкой кастомизацией, высокой доступностью и удобством для пользователей.

Оглавление