Input Message provides a contextual message to a user allowing the passing of content, links, etc.
Note
When the component is empty, the
hidden property/attribute should be used to hide the component from the DOM, otherwise additional spacing will be displayed.Overview
Input Message is a utility component, which can provide context or helpful hints to an accompanying component, such as an Input.
Usage
- Error message handling for a form-based component
- Additional messaging to an accompanying component
Sample
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| icon | icon | Specifies an icon to display. | boolean | string | |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | "idle" |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding text. |
Styles
| Name | Description |
|---|---|
| --calcite-input-message-spacing-value | --calcite-input-message-spacing. Specifies the margin spacing at the top of the component. |
| --calcite-input-message-spacing | Specifies the margin spacing at the top of the component. |
| --calcite-input-message-icon-color | Specifies the component's icon color. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |