io.select.single
One choice from a list you can search.
io.select.single asks to pick one option from a drop-down you can search. The handler gets the chosen option itself, not a string. Options can be records straight from your database. They stay on the server, and the browser gets only their labels.
The simplest one
The whole action file, and roughly what your team sees when it runs.
Change role
What you can set
The settings you will reach for most, each with the line of code that turns it on.
Search as you type. Type a few letters and the list narrows to the options that match. Long lists stay easy to use.
Records from your database. Pass rows as your query returns them. key says what identifies each one and label what the list shows.
The option itself comes back. The handler gets the same object you passed, typed by options. Relations and dates included.
Enums name themselves. Strings and numbers need no key or label. The members of an enum work as they are.
A starting choice by id. defaultValue takes the option or just its key. The id stored on a record is enough.
A × to start over. clearable shows a × that empties the field again. It goes best with .optional().
Optional when you say so. The field is required by default. Chain .optional() and an empty field gives undefined.
Checked on the server. The browser answers only with the position of the choice. An empty field or a value that was not offered is sent back.
Checks of your own. .validate() runs on the server after the built-in checks. Return a message and it shows under the field.
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.