Field wrapper
Shared scaffolding for native input primitives (Input, Textarea, PasswordInput, TokenInput): label, optional helper, trailing label slot, and a single feedback ladder. Messages escalate by tone, weight, and announcement — a passive hint stays silent, progress and warnings announce politely, a blocking error announces assertively. InlineEditable still carries its own error treatment and is not yet on this ladder.
Included in the single kansho full pack. Components are not offered as separate installs.
All states
default · success · warning · error · disabled · loadingSupporting sources
These installed helpers belong to components documented on this page. They do not increase the public component count.
components/ui/field.tsxConvenience re-export of the canonical Field implementation and types.
Component documentation
Field
components/inputs/field.tsxPurpose
Connects a form control with its label, description, hint, and validation status.
Appropriate use
Use around one compatible input when consistent labelling and status messaging are required.
Example
components/inputs/field.tsx has a representative live example in the "All states" section on /components/field.
States
Supports default, loading, success, warning, error, and disabled status with optional, hint, trailing label, description, and status message.
API and props
Field accepts label, htmlFor, optional, hint, status, statusMessage, trailingLabel, description, children, and className; fieldRing returns the matching focus and border classes.
Dependencies
React, Lucide icons, Spinner, and the Kansho cn utility.
Accessibility
Threads id, aria-describedby, and aria-invalid into a single valid child; errors use alert semantics while non-blocking status updates use live status messaging.
Limitations
Automatic wiring applies only to a single compatible React element; complex child groups need explicit ARIA relationships.
Source
Source: components/inputs/field.tsx.
Full pack
components/inputs/field.tsx is documented at /components/field and installs only through the single Kansho full pack; no individual component install is offered.