Skip to content

v1.4.0 — FormField compound (npm lockstep)

Choose a tag to compare

View all tags
@yutaro-shirai yutaro-shirai released this 11 Jun 12:42
· 76 commits to main since this release
v1.4.0
483fa0e

v1.4.0 — FormField compound

Lockstep MINOR cut for the npm group. Closes the longest-deferred React roadmap item (deferred at the v1.0 Phase 9.1 audit, carried through v1.1–v1.3): a FormField compound that automates the id / htmlFor / aria-describedby / aria-invalid wiring consumers previously hand-wrote per field.

Packages

Package Version Content
@willink-labs/react 1.4.0 FormField compound — 25th component
@willink-labs/tailwind-preset 1.4.0 text-danger safelist entry (FormFieldError class string)
@willink-labs/tokens 1.4.0 lockstep marker (no source change)
@willink-labs/css-tokens 1.4.0 lockstep marker (no source change)

No flutter-v* tag this cycle — willink_theme stays at 1.5.0 (ADR-0011).

API

import { FormField, FormFieldControl, FormFieldDescription, FormFieldError, FormFieldLabel, Input } from "@willink-labs/react";

<FormField>
  <FormFieldLabel required>Email</FormFieldLabel>
  <FormFieldControl>
    <Input type="email" />
  </FormFieldControl>
  <FormFieldDescription>会社のメールアドレスを入力してください。</FormFieldDescription>
  <FormFieldError>{errors.email}</FormFieldError>
</FormField>
  • ids generated via useId() (collision-free in lists); label htmlFor pre-wired
  • FormFieldControl is a Radix Slot (zero new runtime deps) — injects id + merged aria-describedby + aria-invalid onto any single control (Input / Textarea / native elements / Radix triggers)
  • aria-describedby only ever references rendered nodes (description/error detected among direct children, SSR-safe)
  • FormFieldError renders only with content, carries role="alert", and drives the control's aria-invalid automatically (invalid prop on FormField as override)
  • Exported types: FormFieldProps / FormFieldLabelProps / FormFieldControlProps / FormFieldDescriptionProps / FormFieldErrorProps

Design rationale (incl. what was deliberately left out — no CVA, no validation/RHF coupling, no layout props): ADR-0015. Cycle doc: docs/roadmap/v1.4.md.

Install

pnpm add @willink-labs/react@^1.4.0 @willink-labs/tailwind-preset@^1.4.0 @willink-labs/tokens@^1.4.0

Out of scope (v1.5 candidates)

Dark-mode consumer rollout / Flutter Checkbox・Switch・RadioGroup wrappers / Popover・Combobox・Breadcrumb・Stepper (Discussion-gated) — see the v1.4 roadmap.

Verification

ADR-0012 Layer 0–2: 171 unit tests (12 new, incl. jest-axe) / Storybook addon-a11y story surface / full local gate before tagging (guardrails・build・audit・contrast・flutter analyze+test+dry-run) / post-publish npm view ×4 == 1.4.0 with OIDC provenance.

Assets 2
Loading