io.input.url

A web address, handed over as a URL.

io.input.url asks a person for a web address. The handler gets a URL, not a string. Read the host or the path from it right away. Only http and https get through unless you say otherwise.

Read the docs All components

The simplest one

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

src/actions/stores/addStoreAction.ts

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

export const addStoreAction = app.defineAction({

name: 'Add store',

handler: async ({ io }) => {

const website = await io.input.url('Website', {

placeholder: 'https://example.com',

});

return `Store at ${website.hostname}.`;

});

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

tools.example.com/actions/stores/add_store

Add store

Websitehttps://northwind.example/pricing

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.

website.hostname // 'northwind.example'

A URL, not a string. Read hostname, pathname or searchParams straight from the answer. href gives the text.

allowedProtocols: ['https']

Only the schemes you allow. allowedProtocols lists the schemes the address may use. Without it, http and https.

await io.input.url('Website')

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

url.protocol === 'https:' ? undefined : msg

Your own rule. .validate() gets the URL after the built-in checks. Return a message to turn the address down.

defaultValue: store.website

Starts filled. defaultValue takes a string or a URL. With disabled: true the person sees it but cannot change it.

await io.input.url('Homepage').optional()

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

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-urlInput URLEvery prop, what the URL gives you and the messages of the built-in checks.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.

Agenda

io.input.textareaMore →

Longer text

Credits

250▲▼

io.input.numberMore →

A number with min, max and decimals

Send a confirmation email

✓The customer gets a copy

io.input.booleanMore →

Yes or no, with a checkbox

Write your first tool today.

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

Get started See the demo