Components Forms

Forms

Label above, input full width, validation below. FluentValidation on the server, no client-side validation. koala-inline-validation-for wires per-field validation on blur via Alpine-AJAX.

<koala-field>

Canonical

Email(required)

<koala-field for="Input.Email"
             label="Email"
             type="email"
             input-prefix="Email"
             placeholder="name@example.com" />

One <koala-field> tag replaces a four-line <label> + <input> + <span asp-validation-for> quadruple. Single column on every viewport.

Variants

6 variants

Email We'll send the quote here.

Input

Single-line text, email, tel, url, number.

Referral fee

Currency

input-prefix="Currency" — £ glyph + AutoNumeric grouping.

Discount rate

Percentage

koala-input-suffix="Percentage" — trailing % glyph. Mirror of the prefix; pairs with the £/% mode toggle.

States

4 states

Email Default state.

Default

Email Focus ring matches primary.

Focus

Email Enter a valid email address

Error

Email Disabled, opacity 0.6.

Disabled

Props

7 attributes

Attribute	Values	Notes
for	Razor model expression	Required, binds to the input model property.
label	string	Above the input. Auto-required suffix when the validator has NotEmpty().
type	text, email, tel, url, number, password	HTML input type. Defaults to text.
koala-input-prefix	Email, Phone, Currency	Leading affordance inside the input. Currency renders a £ glyph and self-wires AutoNumeric digit-grouping (no `data-type` needed).
koala-input-suffix	Percentage	Trailing affordance inside the input — a `%` glyph. The mirror of the prefix; used for the percentage half of a £/% amount toggle.
koala-input-affix-compact	bool	Pulls the prefix/suffix glyph tight (`ps-2`/`pe-2`) for dense table cells like the fee-band editor. The input supplies its own text padding.
koala-inline-validation-for	Razor model expression	Wires per-field validation on blur via Alpine-AJAX.
koala-invalid-for	Razor model expression	Adds the invalid border to a custom picker (button, div, etc.).
novalidate	—	Always on the form. FluentValidation is the sole validator.

Do & don't

We'll send the quote here.

Do Label above, input full width, helper or validation below. Single column on every viewport.

We'll send the quote here.

Don't Don't put the label on the side. Mobile collapses badly and screen readers stop announcing the relationship.

Working example

FluentValidation — server-side backed by FormsModel

First name(required)

Last name(required)

Email(required)

Phone number(required)

Amount(required)

API key(required)

Form actions

Bottom-of-form action button row. Stacks vertically on mobile, switches to horizontal on sm: and above. Replaces the flex flex-col sm:flex-row gap-3 wrapper that opens every form footer.

<koala-form-actions>

Form errors

Top-of-form danger banner that renders the model-level ModelState[string.Empty] errors. Renders nothing when the form is valid, so the spacing doesn't shift between states.

<koala-form-errors>

That email address is already in use.

Sign-in didn't recognise the password. Try again or reset it.

Mounted via <koala-form-errors />; the danger block above is a static visualisation because the design page has no failing ModelState to seed real errors from.