Field & input
Free text entry. The bare styled input/textarea is the primitive; koala-field frames caller-authored controls with label, help and validation. Use koala-select for choosing one value.
Bare input
Field (label + input + validation)
Label, prefix & validation intent
States
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, whether Joey's
credit, a "Choose for me" button or 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
Model expression (koala-field)string (koala-field)bool (koala-field)bool (koala-field)string (koala-field)string (koala-field wrapper)bool: styles a raw input with no model expressionstring: extra classes merged onto the standard chrome (raw input)NoneEmailPhoneCurrency (caller-authored input)NonePercentage (raw input)Model expression: emits koala-inline-validation from a wrapping divstring (koala-file-upload)MIME list (koala-file-upload)bool (koala-file-upload)int (koala-file-upload)bool: calendar interaction for a caller-authored inputyyyy-MM-dd (koala-date-picker)DOM id of the field to write into (koala-ai-field-action)caller request and result handler (koala-ai-field-action)string (koala-ai-field-action)Model expression (koala-field-label)DOM id of an unbound control (koala-field-label)string (koala-field-label)bool (koala-field-label)string (koala-field-label, koala-field-hint)