Skip to content

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

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."center" | "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
labelTextlabel-textstring
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.Record<string, unknown>
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.
label-contentA slot for rendering content next to the component's labelText.

Styles

NameDescription
--calcite-input-action-background-colorSpecifies the background color of the component's clearable element.
--calcite-input-action-background-color-hoverSpecifies the background color of the component's clearable element when hovered.
--calcite-input-action-background-color-pressSpecifies the background color of the component's clearable element when pressed.
--calcite-input-action-icon-colorSpecifies the icon color of the component's clearable & icon elements.
--calcite-input-action-icon-color-hoverSpecifies the icon color of the component's clearable & icon elements when hovered.
--calcite-input-action-icon-color-pressSpecifies the icon color of the component's clearable & icon elements when pressed.
--calcite-input-loading-background-colorSpecifies the background color of the loading element.
--calcite-input-loading-fill-colorSpecifies the fill color of the loading element.
--calcite-input-prefix-background-colorWhen prefixText is provided, specifies the background color of the component's prefix element.
--calcite-input-prefix-size-xWhen prefixText is provided, specifies the width of the component's prefix element.
--calcite-input-prefix-text-colorWhen prefixText is provided, specifies the text color of the component's prefix element.
--calcite-input-suffix-background-colorWhen suffixText is provided, specifies the background color of the component's suffix element.
--calcite-input-suffix-size-xWhen suffixText is provided, specifies the width of the component's suffix element.
--calcite-input-suffix-text-colorWhen suffixText is provided, specifies the color of the component's suffix element.
--calcite-input-text-background-colorSpecifies the component's background color.
--calcite-input-text-border-colorSpecifies the component's border color.
--calcite-input-text-corner-radiusSpecifies the component's border radius.
--calcite-input-text-icon-colorSpecifies the component's icon color.
--calcite-input-text-placeholder-text-colorSpecifies the component's placeholder text color.
--calcite-input-text-text-colorSpecifies the component's text color.
--calcite-input-text-text-color-focusSpecifies the component's text color when focused.

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(options?: FocusOptions): Promise<void>

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