Field & input

Bare input

Field (label + input + validation)

Label, prefix & inline validation

File upload

Date picker

States

AI field action

The "ask Joey to write this field" pill, inside the field's own box. The endpoint decides what it means: with an empty field it writes one from scratch, with text in it it rewrites what is there — so the same component serves a document summary, an enquiry reply, a note or a message. Wrap field and pill in a relative container and leave the field enough bottom padding (pb-11) for the pill to sit over. Every use gets an Undo: replacing what someone typed with no way back is how an AI feature loses trust.

AI credit

Says the assistant wrote what is in the field, and that nobody has touched it since. Muted on purpose: a tray can carry several at once, and in the accent colour they read as a row of things to press and crowd out the controls that genuinely are. The accent means clickable; provenance recedes. Bind the x-show the field already computes so the credit goes the moment someone starts typing — not when they save.

Label row

The label AND the line it sits on. Whatever the field offers beside its label — Joey's credit, a "Choose for me" button, a thinking indicator — is the row's content and lands at its right-hand end. The line is fixed at a 28px floor with its contents centred, so swapping the button for the shorter indicator cannot move the label, and a field with something beside its label sits on the same line as the plain field above it. Never write that row, its height, or the label's bottom margin at a call site (LAYOUT-10).

API