io.input.email

An email address, checked before you get it.

io.input.email asks a person for an email address. The browser checks the format before sending. The server checks it again. The handler gets a string it can send mail to.

Read the docs All components

The simplest one

The whole action file, and roughly what your team sees when it runs.

src/actions/stores/inviteOwnerAction.ts

import { app } from '../../app';

export const inviteOwnerAction = app.defineAction({

name: 'Invite owner',

handler: async ({ io }) => {

const owner = await io.input.email('Owner email', {

helpText: 'Gets the invitation',

});

return `Owner: ${owner}`;

});

The code. One call in an action, the whole file.

tools.example.com/actions/stores/invite_owner

Invite owner

Owner emailomar@harbor.exampleGets the invitation

Continue

In the browser. Roughly what your team sees. Your theme decides the details.

What you can set

The settings you will reach for most, each with the line of code that turns it on.

await io.input.email('Work email')

Checked twice. Something that is not an address comes back with a message. The server checks every answer, so the browser cannot skip it.

const email = await io.input.email('Email')

No stray spaces. The handler gets a string. The spaces around the address are gone.

.validate(isWorkEmail)

Your own rule. .validate() runs on the server after the format check. Return a message to turn the address down, such as one outside your company.

helpText: 'Gets the invitation'

A hint inside and under. placeholder shows in the empty field. helpText says what the address is for.

io.input.email('Backup email').optional()

Or optional. .optional() lets the field stay empty. The handler then gets string | undefined.

defaultValue: email, disabled: true

Shown, not changed. defaultValue fills the field in. With disabled it shows the address and the handler gets it whatever the browser sends.

More in the docs

This page shows the idea. The docs have every prop, the checks on the server and more examples.

docs.awaitio.com/io/input-emailInput EmailEvery prop, what it returns and the message of the built-in check.docs.awaitio.com/core/input-componentsInput componentsOptional fields, your own checks and disabled fields, the same for every input.docs.awaitio.com/io/groupio.groupAsk for the address next to other fields in one form with one Continue.

Next components

Three more calls on io. Each one shows a control and hands your code a typed value.

Webhook URL

https://acme.com/hooks

io.input.urlMore →

A web address, returned as a URL

Agenda

io.input.textareaMore →

Longer text

Credits

250▲▼

io.input.numberMore →

A number with min, max and decimals

Write your first tool today.

An async function, a few await calls, and the form is in the browser.

Get started See the demo