Input Text | Calcite Design System

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.

Sample

Usage

Text or string submissions in forms

Accessibility

Key	Function
`Tab`	Moves focus in and out of the component.
`Tab` and `Shift`	Moves focus in and out of the component.
`Esc`	When `clearable` is `true`, clears the component's `value`.

API reference

Properties

Property	Attribute	Description	Type	Default
alignment	alignment	Specifies the text alignment of the component's `value`.	`Alignment`	`"start"`
autocomplete	autocomplete	Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.	`AutoFill \| undefined`
clearable	clearable	When `true` and the component has a `value`, a clear button is displayed.	`boolean`	`false`
disabled	disabled	When `true`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
form	form	Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists.	`string \| undefined`
icon	icon	Specifies an icon to display.	`IconName \| boolean \| undefined`
iconFlipRtl	icon-flip-rtl	When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s` icon`.	`boolean`	`false`
inlineEdit	inline-edit	Enables inline editing. When not editing, the component displays without a border. When `true`, edits must be saved or cancelled via controls. When `"controls-disabled"` is specified, edits are saved on blur.	`boolean \| "controls-disabled"`	`false`
inlineEditing	inline-editing	When `true` and `inlineEdit` is defined, the component is editable.	`boolean`	`false`
inlineEditingBeforeConfirm		When `inlineEdit` is `true`, specifies a callback to be run when changes are saved.	`(() => Promise<void>) \| undefined`
label	label	Specifies an accessible label for the component.	`string \| undefined`
labelText	label-text	Specifies the component's label text.	`string \| undefined`
loading	loading	When `true`, a busy indicator is displayed.	`boolean`	`false`
maxLength	max-length	When the component resides in a form, specifies the maximum length of text for the component's value.	`number \| undefined`
messageOverrides		Replace localized message strings with your own strings. Note: Individual message keys may change between releases.	`Record<string, unknown> \| undefined`
minLength	min-length	When the component resides in a form, specifies the minimum length of text for the component's value.	`number \| undefined`
name	name	Specifies the name of the component. Required to pass the component's `value` on form submission.	`string \| undefined`
pattern	pattern	When 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 \| undefined`
placeholder	placeholder	Specifies the component's placeholder text.	`string \| undefined`
prefixText	prefix-text	Specifies text to display at the start of the component.	`string \| undefined`
readOnly	read-only	When `true`, the component's `value` can be read, but cannot be modified.	`boolean`	`false`
required	required	When `true` and the component resides in a form, the component must have a `value` in order for the form to submit.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
status	status	Specifies the input field's status, which determines message and icons.	`Status`	`"idle"`
suffixText	suffix-text	Specifies text to display at the end of the component.	`string \| undefined`
validationIcon	validation-icon	Specifies the validation icon to display under the component.	`IconName \| boolean \| undefined`
validationMessage	validation-message	Specifies the validation message to display under the component.	`string \| undefined`
validityread-only		The component's current validation state.	`ValidityState`
value	value	The component's value.	`string`

Slots

Name	Description
action	A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
label-content	A slot for rendering content next to the component's `labelText`.

Styles

Name	Description
--calcite-input-action-background-color	Specifies the background color of the component's `clearable` element.
--calcite-input-action-background-color-hover	Specifies the background color of the component's `clearable` element when hovered.
--calcite-input-action-background-color-press	Specifies the background color of the component's `clearable` element when pressed.
--calcite-input-action-icon-color	Specifies the icon color of the component's `clearable` element.
--calcite-input-action-icon-color-hover	Specifies the icon color of the component's `clearable` element when hovered.
--calcite-input-action-icon-color-press	Specifies the icon color of the component's `clearable` element when pressed.
--calcite-input-loading-background-color	When `loading`, specifies the background color of the component`s` loading` element.
--calcite-input-loading-fill-color	When `loading`, specifies the fill color of the component`s` loading` element.
--calcite-input-text-inline-edit-background-color-hover	When `inlineEdit` is defined and `inlineEditing` is not set, specifies the component's background color when hovered.
--calcite-input-text-inline-edit-control-background-color	When `inlineEdit` is defined, specifies the background color of the component's editing controls.
--calcite-input-text-inline-edit-control-background-color-hover	When `inlineEdit` is defined, specifies the background color of the component's editing controls when hovered.
--calcite-input-text-inline-edit-control-background-color-press	When `inlineEdit` is defined, specifies the background color of the component's editing controls when pressed.
--calcite-input-text-inline-edit-control-corner-radius	When `inlineEdit` is defined, specifies the corner radius of the component's editing controls.
--calcite-input-text-inline-edit-control-loader-color	When `inlineEdit` is `true`, specifies the loader color of the component's confirm control.
--calcite-input-text-inline-edit-control-text-color	When `inlineEdit` is defined, specifies the text color of the component's editing controls.
--calcite-input-text-inline-edit-control-text-color-press	When `inlineEdit` is defined, specifies the text color of the component's editing controls when pressed or hovered.
--calcite-input-prefix-size-x	When `prefixText` is provided, specifies the width of the component's prefix element.
--calcite-input-prefix-text-color	When `prefixText` is provided, specifies the text color of the component's prefix element.
--calcite-input-suffix-size-x	When `suffixText` is provided, specifies the width of the component's suffix element.
--calcite-input-suffix-text-color	When `suffixText` is provided, specifies the color of the component's suffix element.
--calcite-input-text-background-color	Specifies the component's background color.
--calcite-input-text-border-color	Specifies the component's border color.
--calcite-input-text-corner-radius	Specifies the component's border radius.
--calcite-input-text-icon-color	Specifies the component's `icon` color.
--calcite-input-text-placeholder-text-color	Specifies the component's `placeholder` text color.
--calcite-input-text-text-color	Specifies the component's text color.
--calcite-input-text-text-color-focus	Specifies the component's text color when focused.

Events

Name	Description	Behavior
calciteInputTextChange	Fires each time a new `value` is committed.	bubblescomposedcancelable
calciteInputTextInlineEditingCancel	When `inlineEdit` is defined, fires when editing is cancelled.	bubblescomposed
calciteInputTextInlineEditingChange	When `inlineEdit` is defined, fires when `inlineEditing` is enabled or disabled.	bubblescomposed
calciteInputTextInlineEditingConfirm	When `inlineEdit` is `true`, fires after editing is confirmed.	bubblescomposed
calciteInputTextInput	When `inlineEdit` is `false`, fires each time a new `value` is typed.	bubblescomposedcancelable

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
selectText	Selects the text of the component's `value`.	`selectText(): Promise<void>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`

Overview

Sample

Usage

Accessibility

Keyboard navigation

API reference

Properties

Slots

Styles

Events

Methods