Input Message
Overview
Sample
Edit sample on Codepen
API reference
calcite-input-message
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| active | active | Indicates whether the message is displayed. | truefalse | |
| icon | icon | when used as a boolean set to true, show a default icon based on status. You can also pass a calcite-ui-icon name to this prop to display a custom icon | ||
| scale | scale | specify the scale of the input, defaults to m | lm (default)s | |
| status | status | specify the status of the input field, determines message and icons | idle (default)invalidvalid | |
| type | type | specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding text. |
Styles
| Name | Description | CSS Variable |
|---|---|---|
| --calcite-input-message-spacing-value | the top margin above the input-message. | --calcite-input-message-spacing-value |