Input Text

Overview

Input Text is a form entry component, where users can enter a customized text or string.

Input Text can limit the number of characters with its maxLength and minLength properties.

Usage

  • Text or string submissions in forms

Sample

1
<calcite-input-text placeholder="Enter your region"></calcite-input-text>
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.
EscWhen clearable is true, clears the component's value.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
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.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
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
iconiconSpecifies an icon to display.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's button or hyperlink.string
loadingloadingWhen true, the component is in the loading state and calcite-progress is displayed.booleanfalse
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; }
minLengthmin-lengthWhen the component resides in a form, specifies the minimum length of text for the component's value.number
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
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"
suffixTextsuffix-textAdds text to the end of the component.string
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 button next to the component.

Styles

NameDescription
--calcite-input-prefix-sizeSpecifies the component's prefix width.
--calcite-input-suffix-sizeSpecifies the component's suffix width.

Events

NameDescriptionBehavior
calciteInputTextChangeFires each time a new value is typed and committed.bubblescomposedcancelable
calciteInputTextInputFires 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