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.
Canonical
We'll send the quote here.
Label above, input full width, helper or validation below. Single column on every viewport.
Variants
5 variants
We'll send the quote here.
Input
Single-line text, email, tel, url, number.
Select a category
Select
Alpine dropdown with custom options.
Textarea
Multi-line input. Server-side max-length only.
Reject new builds
Switch
Binary on/off.
koala-switch.Yes
No
Radio card
Pill-style Yes / No via
koala-radio-yes-no.States
4 states
Default state.
Default
Focus ring matches primary.
Focus
Enter a valid email address
Error
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 | Leading icon inside the input. |
| 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