Koala logo Design
No matches for “
↑↓ navigate open Esc close
PrimitivesSelect & inputField & input

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.

<koala-field>

Bare input

asp-for (styled automatically)

Field (label + input + validation)

Caller-authored email input with prefix

Label, prefix & validation intent

The field emits; the page owns validation transport

States

Default
Focus
Error
Disabled

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.

by Joey
by Joey

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).

Label, credit and an action on one line
by Joey

Sits 6px under the control, whichever page it is on.

API

for Model expression (koala-field)
label string (koala-field)
required bool (koala-field)
optional bool (koala-field)
helper-text string (koala-field)
class string (koala-field wrapper)
koala-input bool: styles a raw input with no model expression
koala-input-class string: extra classes merged onto the standard chrome (raw input)
koala-input-prefix NoneEmailPhoneCurrency (caller-authored input)
koala-input-suffix NonePercentage (raw input)
koala-inline-validation-for Model expression: emits koala-inline-validation from a wrapping div
name string (koala-file-upload)
accept MIME list (koala-file-upload)
multiple bool (koala-file-upload)
max-size-mb int (koala-file-upload)
koala-date-picker bool: calendar interaction for a caller-authored input
min / max yyyy-MM-dd (koala-date-picker)
for DOM id of the field to write into (koala-ai-field-action)
x-on:koala-ai-field-intent caller request and result handler (koala-ai-field-action)
write-label / busy-label string (koala-ai-field-action)
for Model expression (koala-field-label)
for-id DOM id of an unbound control (koala-field-label)
label string (koala-field-label)
required / optional bool (koala-field-label)
class string (koala-field-label, koala-field-hint)