Form controls and validation
Native form fields provide familiar keyboard behavior. Alpine binds local input state while your backend performs authoritative validation.
Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.
Minimal example
<label class="form-label" for="display-name">Display name</label><input id="display-name" class="form-control" x-model="form.name" required /><label class="form-check form-switch"> <input class="form-check-input" type="checkbox" role="switch" x-model="form.enabled" /> <span>Enabled</span></label>Settings and behavior
- Define form.name and form.enabled in your page provider.
- Supported examples cover text, email, password, URL, phone, search, number, date, time, datetime, textarea, select, multiple select, file, color, range, radio, checkbox, and switch controls.
- Use form-control-sm or form-control-lg for sizes, input-group for joined controls, and form-floating for floating labels.
- Connect validation text using aria-describedby and set aria-invalid when invalid.
- Apply indeterminate checkbox state in a provider method. The CSP runtime rejects DOM assignments inside markup.
Integration notes
The forms controller demonstrates submission, busy state, validation messages, and focusing the first invalid field. File examples show names only. Uploading requires your own adapter. Never store password fields in preferences.
Working reference
See the production example. Return to the component index.
Author
Laurent Declercq l.declercq@agon-innovation.ch
License
Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:
© 2026, Agon Partners Innovation AG, All rights reserved.The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.
Version
Version: 20260921