FormField

Лейбл, опис, підказка й помилка для будь-якого контрола — з тими самими ARIA-зв'язками, що у вбудованих полях.

Поля бібліотеки (UiInput, UiSelect, UiTextarea…) мають власні label, hint і error. UiFormField дає ту саму обв'язку контролам, у яких її немає: сегментному перемикачу, нативному <input type="color">, сторонньому віджету чи власному полю.

Застосовується до всіх таблиць робочого простору.

Колір бренду

Використовується для кнопок і посилань

Як прив'язати контрол

Слот за замовчуванням отримує все, що треба розкласти на поле:

id — на нього вказує for лейбла;
labelId — для aria-labelledby, де for не працює (групи, власні віджети);
describedBy — опис і рівно один із пари «помилка / підказка»;
invalid, required, disabled.

<UiFormField label="Колір" hint="HEX або вибір з палітри" :error="error">
  <template #default="{ id, describedBy, invalid }">
    <input :id="id" type="color" :aria-describedby="describedBy" :aria-invalid="invalid || undefined" />
  </template>
</UiFormField>

API

Props

Назва	Тип	Типово	Опис
`description`	`string`	`undefined`	Пояснення під лейблом, над полем — коли без нього поле незрозуміле («Бачать лише адміністратори»). На відміну від `hint`, не ховається при помилці.
`label`	`string`	`undefined`	—
`hint`	`string`	`undefined`	Підказка під полем. Ховається, коли показано помилку.
`error`	`string`	`undefined`	Текст помилки. Стан помилки вмикає САМА наявність тексту — як в усіх полях бібліотеки.
`id`	`string`	`undefined`	id контрола. Лейбл вказує на нього через `for`, тож задавайте його самому полю через слот: `<input :id="id">`.
`as`	divfieldset	`"div"`	`fieldset` — для групи контролів (кілька чекбоксів, сегментний перемикач): лейбл стає `<legend>`, і скрінрідер оголошує назву групи при вході в будь-який її елемент. `div` — для одного поля.
`required`	`boolean`	`false`	—
`disabled`	`boolean`	`false`	—

Слоти

Назва	Опис
`default`	Сам контрол. Слот отримує все, що треба прив'язати: `id`, `labelId`, `describedBy`, `invalid` — розкладайте їх на поле, і зв'язки лейбла, підказки й помилки працюватимуть так само, як у вбудованих полях.
`label-aside`	Праворуч від лейбла: «Забули пароль?», лічильник, «необов'язково».

Коли використовувати

Контрол без власного лейбла: UiToggleGroup, UiSlider без label, нативні поля, сторонні віджети.
Група контролів під одним заголовком — as="fieldset": кілька чекбоксів, перемикачів.
Лейбл із дією праворуч — «Забули пароль?», «Скинути» — через слот label-aside.

Коли НЕ використовувати

Навколо UiInput, UiSelect та інших полів із власним label — вийде два лейбли й два описи.
Для макета форми (колонки, відступи між полями) — це звичайна сітка.

Доступність

aria-describedby вказує на description і рівно на ОДИН із пари помилка / підказка. Обидва одразу — і скрінрідер зачитає інструкцію, яку користувач щойно порушив, раніше за причину відмови (правило дому).

У режимі fieldset лейбл — <legend>, і вона стоїть першою дитиноюfieldset: лише тоді браузер дає групі назву. Вкладена у flex-рядок поруч із label-aside, вона назвою вже не була б. Тому легенда прихована, а видимий рядок дублює її для ока з aria-hidden.

Помилка має role="alert" і з'являється разом із текстом — так само, як у вбудованих полях: стан помилки вмикає САМА наявність тексту.