Label, description and error come from the field — not from markup beside it

An error the control cannot point at

Real code from src/components/conform-checkbox.tsx (fixed — the message had no id while the control already referenced one)

const inputProps = getInputProps(field, { type: "checkbox" })
// inputProps carries aria-describedby={field.errorId} whenever the field is invalid

<Checkbox {...inputProps} isInvalid={hasErrors}>{label}</Checkbox>
{hasErrors && <p className="text-sm text-red-500">{field.errors?.join(", ")}</p>}

<Checkbox {...inputProps} isInvalid={hasErrors}>{label}</Checkbox>
{hasErrors && (
  <p id={field.errorId} className="block text-[12px] text-red-500">
    {field.errors?.join(", ")}
  </p>
)}

One attribute. Without it the checkbox announces "invalid" and nothing else — the reason is on screen for everyone except the people who most need it read out. Note that FieldError is not the fix here: a bare Checkbox provides no FieldErrorContext, so FieldError would render null.

Inside a react-aria field, FieldError is the fix

<TextField isInvalid={errors.length > 0}>
  <Label>Email</Label>
  <Input />
  {errors.length > 0 && <p className="mt-1 text-[12px] text-red-500">{errors[0]}</p>}
</TextField>

<TextField isInvalid={errors.length > 0}>
  <Label>Email</Label>
  <Input />
  <FieldError>{errors.join(", ")}</FieldError>
</TextField>

Styled identically, connected differently. FieldError renders into the errorMessage slot the field's aria-describedby already points at, and it hides itself when the field goes valid — two things the paragraph has to be told to do.

A placeholder standing in for a label

<ConformField field={fields.email} placeholder="Email address" />

<ConformField field={fields.email} label="Email address" placeholder="you@example.com" />

The placeholder is the hint, not the name. Once someone starts typing, the labelless version has nothing on screen saying what the value is — which is also what a screen reader had all along.

Biome has no built-in rule for this one, so it ships as a GritQL plugin. Save it as ui-lib-rules/render-field-text-through-the-field.grit and add that path to `plugins` in your biome.jsonc. Its documented exceptions are compiled in as `$filename` guards, because Biome's overrides do not scope plugins.

// Label, description and error come from the field — not from markup beside it
// AUTO-GENERATED from https://ui-lib.quebi.de/api/rules/render-field-text-through-the-field.json — do not edit by hand.
//
// https://ui-lib.quebi.de/rules/render-field-text-through-the-field

language js;

JsxElement(opening_element = $open, children = $children) as $message where {
  $open <: JsxOpeningElement(name = $el, attributes = $attrs),
  $el <: r"^(?:p|span|div)$",
  $children <: contains `$field.errors` until JsxElement(),
  $children <: not contains `$field.errors.length`,
  $attrs <: not contains JsxAttribute(name = r"^id$"),
  // documented exception: components/ui/**
  not $filename <: r".*components/ui/.*",
  // documented exception: src/components/**
  not $filename <: r".*src/components/.*",
  register_diagnostic(
    span = $message,
    message = "This renders field errors in an element the control cannot reference. Inside a react-aria field use <FieldError> from @/components/field; outside one, put id={field.errorId} on this element so the aria-describedby that getInputProps already emits resolves to it. See https://ui-lib.quebi.de/rules/render-field-text-through-the-field",
    severity = "error"
  )
}

Finds candidates for review in any repo, linter or not. Coarser than the Biome check: it reads lines, not syntax, so expect false positives and treat a clean run as weaker evidence than a clean lint run.

# render-field-text-through-the-field — candidates for review
rg -n -g '*.{tsx,jsx}' \
  -g '!components/ui/**' \
  -g '!src/components/**' \
  "<(p|span|div)[^>]*>\\s*\\{[a-zA-Z]+\\.errors"

One exception on this rule is a judgement call, so it cannot be a path. Biome's suppression syntax has a slot for the reason — fill it, because that note is what makes the carve-out reviewable instead of invisible.

{/* biome-ignore plugin: A form-level error summary that belongs to no single field — "Your session expired, please sign in again" is not a field error. */}