Input Number

io.input.number() requests a number. Provided by the @awaitio/input-number package.

A Refund amount field filled with 49.90, with help text under it

Install

npm install @awaitio/input-number

Setup

app.ts

import { inputNumber } from '@awaitio/input-number';

export const app = new AwaitIO({
  // name, actionsDirectory, theme, secret, users…
  components: { input: { number: inputNumber } },
});

Usage

const amount = await io.input.number('Refund amount', {
  min: 0,
  max: 500,
  decimals: 2,
  helpText: 'In euros, up to 500',
});

Props

Prop	Type	Required	Description
`placeholder`	`string`	Optional	Text shown in the empty field.
`helpText`	`string`	Optional	Secondary text under the field.
`defaultValue`	`number`	Optional	The value the field starts with. Empty when left out.
`min`	`number`	Optional	The smallest number accepted.
`max`	`number`	Optional	The largest number accepted.
`decimals`	`number`	Optional	How many decimal places are allowed. Defaults to `0`: whole numbers only.
`disabled`	`boolean`	Optional	Shows the starting value without letting it change; the handler gets that value whatever the browser sends.

Props are checked when the io call is made: a prop of the wrong type throws in the handler.

Optional

The field is required. Chain .optional() to let it stay empty; the handler then gets number | undefined, see Optional fields.

const discount = await io.input.number('Discount', { max: 50 }).optional();

Returns

number, already checked against min, max and decimals: typing 49.90 gives 49.9.

Built-in validation

The field is always required. The browser stops values outside the limits before they are sent, and the server checks every answer again, so these messages come back even when the browser’s own checks are bypassed:

When	Message
The field is empty or not a number	`<label>: enter a number.`
Smaller than `min`	`<label> must be at least <min>.`
Larger than `max`	`<label> must be at most <max>.`
More decimal places than allowed	`<label> must be a whole number.` with `decimals: 0`, otherwise `<label> can have at most <decimals> decimal places.`

Custom validation

Chain .validate() for a check of your own. It runs on the server after the checks above, gets the value the handler would get and returns a message to show under the field, or nothing when the value is fine; see Custom validation.

const amount = await io.input.number('Refund amount', { decimals: 2 }).validate((amount) => {
  return amount <= order.total ? undefined : `The order was only ${order.total}.`;
});

Getting started

SDK

Components

Display components

Layout components

Context

Install

Setup

Usage

Props

Optional

Returns

Built-in validation

Custom validation

​Install

​Setup

​Usage

​Props

​Optional

​Returns

​Built-in validation

​Custom validation

Install

Setup

Usage

Props

Optional

Returns

Built-in validation

Custom validation