Input Message

Overview

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-input-message
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

Indicates whether the message is displayed.

booleanA boolean property should be present, or not
truefalse
iconicon

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

icon with defaultSet to true to get a recommended default icon. You can also pass a valid calcite ui icon string
true
scalescale

specify the scale of the input, defaults to m

typedChoose from a set of typed values
lm (default)s
statusstatus

specify the status of the input field, determines message and icons

typedChoose from a set of typed values
idle (default)invalidvalid
typetype
deprecated"floating" type is no longer supported

specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input)

typedChoose from a set of typed values

Slots

NameDescription
default (unnamed)

A slot for adding text.

Styles

NameDescriptionCSS Variable
--calcite-input-message-spacing-value

the top margin above the input-message.

--calcite-input-message-spacing-value

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.