Компоненты

Field и поля

Подпись, пояснение и ошибка, связанные с полем через aria.

Обёртка поля: подпись, пояснение и ошибка — и связка их с самим полем через id и aria-describedby.

Пример

Название проекта

Видно всем участникам

Почта

Похоже, это не адрес почты

Роль

Описание

Поддерживается ограниченный Markdown

import { Field, Input, Select, Textarea } from "@toimetdev/pathlogs-core";

<Field label="Название проекта" required hint="Видно всем участникам">
  {(props) => <Input {...props} defaultValue="Личный кабинет" />}
</Field>

<Field label="Почта" error={invalid ? "Похоже, это не адрес почты" : undefined}>
  {(props) => <Input {...props} value={email} onChange={onChange} />}
</Field>

Пока задана ошибка, пояснение скрывается: два сообщения под одним полем спорят друг с другом, а важнее сейчас ошибка.

Почему функция, а не дети

tsx

// приходит в функцию
{
  id: ":r3:",
  "aria-describedby": ":r3:-error",   // если есть ошибка или пояснение
  "aria-invalid": true,               // если есть ошибка
}

Пропсы

Проп	Тип	По умолчанию	Описание
`label`	`ReactNode`	—	Подпись над полем.
`hint`	`ReactNode`	—	Пояснение под полем. Скрывается, когда показана ошибка.
`error`	`ReactNode`	—	Текст ошибки. Пока задан, поле помечено `aria-invalid`, а сообщение читается как `role="alert"`.
`required`	`boolean`	—	Звёздочка рядом с подписью.
`children`*	`(props) => ReactNode`	—	Само поле. Получает id и aria-атрибуты.

labelReactNode

Подпись над полем.

hintReactNode

Пояснение под полем. Скрывается, когда показана ошибка.

errorReactNode

Текст ошибки. Пока задан, поле помечено aria-invalid, а сообщение читается как role="alert".

requiredboolean

Звёздочка рядом с подписью.

children*(props) => ReactNode

Само поле. Получает id и aria-атрибуты.

Поля отдельно

Input, Textarea и Select — тонкие обёртки над нативными элементами с общим оформлением и кольцом фокуса. Работают и без Field:

tsx

<Input placeholder="Поиск…" />
<Textarea rows={4} />
<Select defaultValue="MANAGER">
  <option value="ADMIN">Администратор</option>
  <option value="MANAGER">Менеджер</option>
</Select>

Все трое пробрасывают ref и принимают любые нативные атрибуты. Невалидное состояние оформляется по aria-invalid, а не по отдельному пропу — так стиль следует за доступностью, а не живёт рядом с ней.