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

An error the control cannot point at

Was real code in src/components/conform-checkbox.tsx (the message had no id while the control already referenced one), until it was fixed

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-quebi-danger">{field.errors?.join(", ")}</p>}

<Checkbox
  name={field.name}
  isInvalid={hasErrors}
  aria-describedby={describedBy(hasErrors && field.errorId)}
>
  {label}
</Checkbox>
{hasErrors && <FieldError id={field.errorId}>{field.errors?.join(", ")}</FieldError>}

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. The id is explicit because a bare Checkbox is not a react-aria field: nothing generates an id here, and react-aria's own FieldError would render null. ui-lib's FieldError falls back to rendering the message, so the shape is the same one used inside a TextField — but drop the id there, where the field owns it.

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-quebi-danger">{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 load it from an `overrides` entry — the one in the file's own header, which lists the paths the rule applies to (app/**/*.{tsx,jsx}, src/**/*.{tsx,jsx}) and the paths its documented exceptions carve back out. Not from the top-level `plugins`: a plugin listed there runs against every file you lint, and an override can add one but cannot take one away. If your project keeps its components somewhere else, edit the `includes` to match.

// 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
//
// This file says what the rule is, not where it applies. A plugin listed in
// the top-level `plugins` runs against every file Biome lints, so scope it
// with an `overrides` entry — Biome resolves `includes` against the project
// root, which is the one thing a $filename regex in here could not do:
//
//   {
//     "overrides": [
//       {
//         "includes": [
//           "app/**/*.{tsx,jsx}",
//           "src/**/*.{tsx,jsx}",
//           "!components/ui/**",
//           "!src/components/**"
//         ],
//         "plugins": [
//           "./ui-lib-rules/render-field-text-through-the-field.grit"
//         ]
//       }
//     ]
//   }

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(),
  $field <: r"^(?:[A-Za-z_$][A-Za-z0-9_$]*\.)*(?:field|fields\.[A-Za-z0-9_$]+(?:\.[A-Za-z0-9_$]+)*)$",
  $children <: not contains `$field.errors.length`,
  $attrs <: not contains JsxAttribute(name = r"^id$"),
  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 '*.{jsx,tsx}' \
  -g '!components/ui/**' \
  -g '!src/components/**' \
  "<(p|span|div)[^>]*>\\s*\\{[a-zA-Z0-9_$.]*\\bfields?\\b[a-zA-Z0-9_$.]*\\.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. The rule is named by its plugin's file name, render-field-text-through-the-field.grit — a suppression that names this rule quiets this rule and no other plugin on the same line, and if the file is renamed Biome reports the comment as having no effect rather than guessing. `lint/plugin` on its own is valid too and quiets every plugin rule on the node at once; name the rule instead.

// biome-ignore lint/plugin/render-field-text-through-the-field: A form-level error summary that belongs to no single field — "Your session expired, please sign in again" is not a field error.

// Between JSX children, where a comment has to be an expression, the same
// line is written {/* biome-ignore … */}.