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`
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`
icon	icon	Specifies an icon to display.	`IconName \| boolean`
iconFlipRtl	icon-flip-rtl	When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s` icon`.	`boolean`	`false`
label	label	Specifies an accessible label for the component's button or hyperlink.	`string`
labelText	label-text	Specifies the component's label text.	`string`
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`
messageOverrides		Overrides individual strings used by the component.	`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`
name	name	Specifies the name of the component. Required to pass the component's `value` on form submission.	`string`
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`
placeholder	placeholder	Specifies the component's placeholder text.	`string`
prefixText	prefix-text	Specifies text to display at the start of the component.	`string`
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`
validationIcon	validation-icon	Specifies the validation icon to display under the component.	`IconName \| boolean`
validationMessage	validation-message	Specifies the validation message to display under the component.	`string`
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-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 typed and committed.	bubblescomposedcancelable
calciteInputTextInput	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