Input Message provides a contextual message to a user allowing the passing of content, links, etc.
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
<calcite-label>
Desired subdomain
<calcite-input suffix-text=".city-of-acme.gov" placeholder="Enter your subdomain" value="big-map-fan">
</calcite-input>
<calcite-input-message icon="smile" status="valid">
Excellent news - this domain is available.
</calcite-input-message>
</calcite-label>
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 | The top margin spacing above the component. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |