@vonage/vwc-helper-message
v2.46.0
Published
[internal] helper message component to be used in textfield / textarea / select / file-picker etc
Downloads
1,839
Maintainers
Keywords
Readme
Introduction
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-message
is internally used in:vwc-file-picker
,vwc-select
,vwc-textarea
,vwc-textfield
and more to come.
Usage
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.
API
Slots
Any light DOM content within the component is slotted to be a message content.
Attirbutes / Properties
| Property | Attribute | Type | Description |
|-----------|------------|-----------|-------------|
| isError
| is-error
| boolean
| adds error icon before the text message