Input

Inputs are text containers which can be used to create forms, enter data, and enact various commands.

Overview

Input is an extremely robust set of components designed to fill many needs throughout an interface. With the ability to have prefixes, suffixes, clear controls, icons, and buttons, Inputs can visually accomplish almost any stylistic need. Inputs also have the ability to have error states, as well as used in coordination with Input Message for hints, validation, and other important contextual feedback.

Inputs contain multiple types, such as "text", "number", "email", "password", "file", "tel", "search", "time", "date", etc.

Usage

  • Text or number entries
  • Any type of entry tied to validation
  • Data entry
  • Form elements

Sample

5 samples
1
<calcite-input placeholder="Enter your region"></calcite-input>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.
EscIf the component is focused and clearable with a value - will clear the value.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
acceptacceptSpecifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when type is "file". Read the native attribute's documentation on MDN for more info.string
alignmentalignmentSpecifies the text alignment of the component's value."end" | "start""start"
autocompleteSpecifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.AutoFill
clearableclearableWhen true, a clear button is displayed when the component has a value. The clear button shows by default for "search", "time", and "date" types, and will not display for the "textarea" type.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
filesWhen type is "file", specifies the component's selected files.FileList
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanfalse
iconiconWhen true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.boolean | string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
labellabelAccessible name for the component.string
loadingloadingWhen true, a busy indicator is displayed.booleanfalse
maxmaxWhen the component resides in a form, specifies the maximum value for type="number".number
maxLengthmax-lengthWhen the component resides in a form, specifies the maximum length of text for the component's value.number
messageOverridesUse this property to override individual strings used by the component.{ clear?: string; loading?: string; }
minminWhen the component resides in a form, specifies the minimum value for type="number".number
minLengthmin-lengthWhen the component resides in a form, specifies the minimum length of text for the component's value.number
multiplemultipleWhen true, the component can accept more than one value. This property only has an effect when type is "email" or "file". Read the native attribute's documentation on MDN for more info.booleanfalse
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
numberButtonTypenumber-button-typeSpecifies the placement of the buttons for type="number"."horizontal" | "none" | "vertical""vertical"
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
patternpatternWhen the component resides in a form, specifies a regular expression (regex) pattern the component's value must match for validation. Read the native attribute's documentation on MDN for more info.string
placeholderplaceholderSpecifies placeholder text for the component.string
prefixTextprefix-textAdds text to the start of the component.string
readOnlyread-onlyWhen true, the component's value can be read, but cannot be modified.booleanfalse
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
stepstepSpecifies the granularity the component's value must adhere to."any" | number
suffixTextsuffix-textAdds text to the end of the component.string
typetypeSpecifies the component type. Note that the following types add type-specific icons by default: "date", "email", "password", "search", "tel", "time". "textarea" [Deprecated] use the calcite-text-area component instead."color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week""text"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's value.string

Slots

NameDescription
actionA slot for positioning a calcite-button next to the component.

Styles

NameDescription
--calcite-input-prefix-sizeSpecifies the component's prefix width, when present.
--calcite-input-suffix-sizeSpecifies the component's suffix width, when present.
--calcite-input-background-colorSpecifies the component's background color.
--calcite-input-border-colorSpecifies the component's border color.
--calcite-input-corner-radiusSpecifies the component's corner radius.
--calcite-input-shadowSpecifies the shadow around the component.
--calcite-input-icon-colorSpecifies the component's icon color.
--calcite-input-text-colorSpecifies the component's text color.
--calcite-input-placeholder-text-colorSpecifies the component's placeholder text color.
--calcite-input-actions-background-colorSpecifies the background color of the component's clearable and number-button-type elements.
--calcite-input-actions-background-color-hoverSpecifies the background color of the component's clearable and number-button-type elements when hovered.
--calcite-input-actions-background-color-pressSpecifies the background color of the component's clearable and number-button-type elements when pressed.
--calcite-input-actions-icon-colorSpecifies the icon color of the component's clearable and number-button-type elements.
--calcite-input-actions-icon-color-hoverSpecifies the icon color of the component's clearable and number-button-type elements when hovered.
--calcite-input-actions-icon-color-pressSpecifies the icon color of the component's clearable and number-button-type elements when pressed.
--calcite-input-loading-background-colorSpecifies the background color of the loading element, when present.
--calcite-input-loading-fill-colorSpecifies the fill color of the loading element, when present.
--calcite-input-prefix-background-colorSpecifies the component's prefix background color, when present.
--calcite-input-prefix-text-colorSpecifies the component's prefix text color, when present.
--calcite-input-suffix-background-colorSpecifies the component's suffix background color, when present.
--calcite-input-suffix-text-colorSpecifies the component's suffix text color, when present.

Events

NameDescriptionBehavior
calciteInputChangeFires each time a new value is typed and committed.bubblescomposed
calciteInputInputFires each time a new value is typed.bubblescomposedcancelable

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
selectTextSelects the text of the component's value.selectText(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

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