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. | true false | |
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 | l m (default) s | |
status | status | specify the status of the input field, determines message and icons | idle (default) invalid valid | |
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 |