inputs

AMD: require(["esri/form/elements/inputs"], (inputs) => { /* code goes here */ });
ESM: import * as inputs from "@arcgis/core/form/elements/inputs.js";
Object: esri/form/elements/inputs
Since: ArcGIS Maps SDK for JavaScript 4.16

A convenience module for importing esri/form/elements/inputs/Input classes when developing with TypeScript. For example, rather than importing form element inputs one at a time like this:

import BarcodeScannerInput from "esri/form/elements/inputs/BarcodeScannerInput";
import ComboBoxInput from "esri/form/elements/inputs/ComboBoxInput";
import DatePickerInput from "esri/form/elements/inputs/DatePickerInput";
import DateTimeOffsetPickerInput from "esri/form/elements/inputs/DateTimeOffsetPickerInput";
import DateTimePickerInput from "esri/form/elements/inputs/DateTimePickerInput";
import RadioButtonsInput from "esri/form/elements/inputs/RadioButtonsInput";
import SwitchInput from "esri/form/elements/inputs/SwitchInput";
import TextAreaInput from "esri/form/elements/inputs/TextAreaInput";
import TextBoxInput from "esri/form/elements/inputs/TextBoxInput";
import TimePickerInput from "esri/form/elements/inputs/TimePickerInput";

You can use this module to import them on a single line:

import { BarcodeScannerInput, ComboBoxInput, DatePickerInput, DateTimeOffsetPickerInput, DateTimePickerInput, RadioButtonsInput, SwitchInput, TextAreaInput, TextBoxInput, TimePickerInput } from "esri/form/elements/inputs";

This module also allows you to implement type guards on the form element inputs, making your code smarter.

import { Input } from "esri/form/elements/inputs";

function logFormElementInput(input: Input): void {
  if (input.type === "text-area") {
    console.log("Form element input type is TextAreaInput");
  }
  else {
    // The compiler knows the content element must be an input type such as  `text-area` | `text-box` | `barcode-scanner` | `radio-buttons` | `combo-box`, etc.
    console.log("The value is not a valid form element input.")
  }
}

Type Definitions

BarcodeScannerInput

Type Definition
BarcodeScannerInput BarcodeScannerInput

The BarcodeScannerInput class defines the desired user interface is a barcode or QR code scanner. If this type is used in an ArcGIS Maps SDK for JavaScript web application, it will default to the esri/form/elements/inputs/TexBoxInput type as the API does not support bar code scanning as an input type.

ComboBoxInput

Type Definition
ComboBoxInput ComboBoxInput

The ComboBoxInput class defines the desired user interface for a combo box group.

DatePickerInput

Type Definition
DatePickerInput DatePickerInput

The DatePickerInput class defines the desired user interface for working with date-only types.

DateTimeOffsetPickerInput

Type Definition
DateTimeOffsetPickerInput DateTimeOffsetPickerInput

The DateTimeOffsetPickerInput class defines the desired user interface for editing date and time fields in a form that also requires the option to include an offset from Coordinated Universal Time (UTC).

DateTimePickerInput

Type Definition
DateTimePickerInput DateTimePickerInput

The DateTimePickerInput class defines the desired user interface for editing date (including time) fields in a form.

RadioButtonsInput

Type Definition
RadioButtonsInput RadioButtonsInput

The RadioButtonsInput class defines the desired user interface for a radio button group.

SwitchInput

Type Definition
SwitchInput SwitchInput

The SwitchInput class defines the desired user interface for a binary switch or toggle. This should be used when selecting between two options in a form.

TextAreaInput

Type Definition
TextAreaInput TextAreaInput

TextAreaInput defines the desired user interface is a multi-line text area.

TextBoxInput

Type Definition
TextBoxInput TextBoxInput

TextBoxInput defines the desired user interface is a single-line text box.

TimePickerInput

Type Definition
TimePickerInput TimePickerInput

The TimePickerInput class defines the desired user interface for working with time-only types.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close