io.group
Several fields, one Continue.
io.group puts several io calls on one form. The person fills them in and presses Continue once. The handler gets all the values together, each typed by its key.
The simplest one
The whole action file, and roughly what your team sees when it runs.
Create account
What you can set
The settings you will reach for most, each with the line of code that turns it on.
One form, one Continue. Every field of the group sits on one screen. The person answers them all at once.
No await inside. Pass the io calls without await. Inside io.group a call only describes its field.
In the order of the keys. The fields appear as the keys of the object go. Only an object is accepted, not an array.
Typed per key. Each key holds what its io call returns. A text field gives a string, a date field a luxon DateTime.
All errors at once. The server checks every field when the form is sent. Each error shows under its own field.
A check across fields. Chain .validate() to the group. Its message shows above Continue, and it runs on the server.
Optional fields. Chain .optional() to a field. It can stay empty, and its key holds undefined.
Totals next to inputs. A display component can sit between the fields. It shows something and answers undefined.
Nothing to register. io.group is part of awaitio. An empty group shows just the Continue button.
More in the docs
This page shows the idea. The docs have every prop, the checks on the server and more examples.
Next components
Three more calls on io. Each one shows a control and hands your code a typed value.
Write your first tool today.
An async function, a few await calls, and the form is in the browser.