vwc-helper-message 2.39.1
Install from the command line:
Learn more about npm packages
$ npm install @Vonage/vwc-helper-message@2.39.1
Install via package.json:
"@Vonage/vwc-helper-message": "2.39.1"
About this version
vwc-helper-message component is a common helper/error message presenter.
It is mostly to be used as an additional, mid length, informative hint located below a functional blocks or elements.
This component featured with constant font style, 1 level lesser than the regular body content one,
single-liner appearance and optional error icon when is-error attribute set.
vwc-helper-messageis internally used in:vwc-file-picker,vwc-select,vwc-textarea,vwc-textfieldand more to come.
Install the component as part of the Vivid installation bundle or on it's own.
Instantiate it as following:
import '@vonage/vwc-helper-message';Then use in HTML as following:
<div aria-describedby="content-description">
some content requiring description
</div>
<vwc-helper-message id="content-description" is-error="false">Message text</vwc-helper-message>A11Y: please, add a relevant id attribute to the vwc-helper-message and use that id with the aria-describedby attribute in the base content as in the example above.
Read more on aria-describedby usage here.
Any light DOM content within the component is slotted to be a message content.
| Property | Attribute | Type | Description |
|---|---|---|---|
isError |
is-error |
boolean |
adds error icon before the text message |
