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 max and min properties.
Usage
- Text or string submissions in forms
Sample
Accessibility
Keyboard navigation
| 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 components 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 | |
| validity | The component's current validation state. | MutableValidityState | ||
| 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 components loading` element. |
| --calcite-input-loading-fill-color | When loading, specifies the fill color of the components 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. | |
| calciteInputTextInput | Fires each time a new value is typed. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once 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> |