Select Page
Number

Number

🔴 On2Air Forms has been shutdown to focus on our On2Air Backups Airtable app Learn more about automated Airtable backups - on2air.com

➡️
The Number field in On2Air Forms allows you to display numbers in various formats.

See more Fields in the Form Field Reference

image

How to Add a Field to Your Form

Here’s how to add Airtable Fields or On2Air Custom Fields to your Form

Field Configuration

Field Labels

Title

- Add a title to be displayed above the field as the main name. To leave blank, add a single space

By default, this is the name of your field in Airtable. You can use a different field name than your base and it will not affect the field name in your base.

Sub Title

- Add a subtitle to be displayed above the field. To leave blank, add a single space

You can use text in this field and you can use Markdown to increase text size, bold, or italics

Related: Use Markdown with On2Air FormsUse Markdown with On2Air Forms

Helper Text

- Add helper text to be displayed below the field. To leave blank, add a single space

You can use text in this field and you can use Markdown to increase text size, bold, or italics

Related: Use Markdown with On2Air FormsUse Markdown with On2Air Forms

Example:

image
image

Field Status

  • Optional Field - Determine how to this field is displayed. Standard Editable Field, but not required.
  • Required Field - Determine how to this field is displayed. Standard Editable Field that is required.
  • Disabled Field - Determine how to this field is displayed. Standard Field as Non-Editable.
  • Display Field Content - Determine how to this field is displayed. Display Field as Text or other Displayable format (not editable).
  • Hidden Field - Determine how to this field is displayed. Field is Included but not Visible.

Default Value - Add a default value to this field that will be added to every form submission

Use Default on Edit if Empty - Enable if you want to use the default value on Record Edits if the field has no value when the form is submitted

URL Prefill Settings

URL Prefill Key

The Key used to set this field value from the URL (i.e. ?key=value). (i.e. www.yoururl.com?key=value)

Remove key to disable URL Prefills for this field.

Example: Your URL is www.yoururl.com?shoes=red

  • The Key is shoes and the value is red. When your form user uses this URL, the shoes field will automatically be entered as red without the user having to enter it in.

Extra Options (Advanced)

You can format numbers in various ways.

image

Number Properties

You can add additional options to your Number field with the following properties

  • Open the Extra Options menu in your field and click View Advanced Options
image
NameDescription
ariaLabelledBy

Establishes relationships between the component and label(s) where its value should be one or more element IDs.

tooltipOptions

Configuration of the tooltip, refer to the tooltip documentation for more information.

tooltip

Content of the tooltip.

inputClassName

Inline style of the input field.

inputStyle

Inline style of the input field.

inputId

Identifier of the input element.

className

Style class of the element.

style

Inline style of the component.

size

Size of the input field.

readOnly

When present, it specifies that the element should be read-only. Default is false

placeholder

Hint text for the input field.

inputmode

The inputmode attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display.

pattern

The pattern attribute specifies a regular expression that the element's value is checked against on form submission.

autoFocus

When present, it specifies that the component should automatically get focus on load.

tabIndex

Index of the element in tabbing order.

required

When present, it specifies that an input field must be filled out before submitting the form.

disabled

When present, it specifies that the element should be disabled.

max

Maximum boundary value.

min

Mininum boundary value.

step

Step factor to increment/decrement the value. Default is 1

allowEmpty

Determines whether the input field is empty.

type

Type of the input element.

name

Name of the input element.

id

Identifier of the element.

maxFractionDigits

The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list(2 if the list doesn't provide that information).

minFractionDigits

The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information).

useGrouping

Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.

currencyDisplay

How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".

currency

The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.

suffix

Text to display after the value.

prefix

Text to display before the value.

mode

Defines the behavior of the component, valid values are "decimal" and "currency".

localeMatcher

The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See Locale Negotation for details.

locale

Locale to be used in formatting.

decrementButtonIcon

Style class of the decrement button.

incrementButtonIcon

Style class of the increment button.

decrementButtonClassName

Style class of the decrement button.

incrementButtonClassName

Style class of the increment button.

buttonLayout

Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".

showButtons

Displays spinner buttons.

format

Whether to format the value.

value

Value of the component.

See more details - Prime React Input Numbers

Remove Commas from Numbers

If your number needs no commas, uncheck the useGrouping option

Danger Zone

  • Delete your field from the form
  • Click Remove
image
  • Click Yes, I want to delete this field from the form
image