Components

Field and inputs

Label, hint and error wired to the input through aria.

A field wrapper: label, hint and error — and the wiring that connects them to the input through id and aria-describedby.

Example

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

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

Почта

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

Роль

Описание

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

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

<Field label="Project name" required hint="Visible to every member">
  {(props) => <Input {...props} defaultValue="Customer portal" />}
</Field>

<Field label="Email" error={invalid ? "That does not look like an email address" : undefined}>
  {(props) => <Input {...props} value={email} onChange={onChange} />}
</Field>

While an error is set, the hint is hidden: two messages under one field compete with each other, and right now the error matters more.

Why a function, not children

tsx

// what the function receives
{
  id: ":r3:",
  "aria-describedby": ":r3:-error",   // when there is an error or a hint
  "aria-invalid": true,               // when there is an error
}

Props

Prop	Type	Default	Description
`label`	`ReactNode`	—	The label above the field.
`hint`	`ReactNode`	—	The hint below the field. Hidden while an error is shown.
`error`	`ReactNode`	—	The error text. While it is set, the field is marked `aria-invalid` and the message is announced as `role="alert"`.
`required`	`boolean`	—	An asterisk next to the label.
`children`*	`(props) => ReactNode`	—	The field itself. Receives the id and the aria attributes.

labelReactNode

The label above the field.

hintReactNode

The hint below the field. Hidden while an error is shown.

errorReactNode

The error text. While it is set, the field is marked aria-invalid and the message is announced as role="alert".

requiredboolean

An asterisk next to the label.

children*(props) => ReactNode

The field itself. Receives the id and the aria attributes.

The inputs on their own

Input, Textarea and Select are thin wrappers over the native elements with shared styling and a focus ring. They work without Field too:

tsx

<Input placeholder="Search…" />
<Textarea rows={4} />
<Select defaultValue="MANAGER">
  <option value="ADMIN">Administrator</option>
  <option value="MANAGER">Manager</option>
</Select>

All three forward ref and accept any native attributes. The invalid state is styled from aria-invalid rather than a separate prop — so the styling follows accessibility instead of living next to it.