Skip to main content
🏠FormForm CaptionVersion: 2.0.0-beta.6

Form Caption

qtm-form-caption element is a message (hint, error message, counter value, etc) that appears below the inputs.

This is some placeholder help text
<qtm-form-caption>This is some placeholder help text</qtm-form-caption>

Sizes

Control the size of a form caption setting size attribute to small, medium or large value. By default, the caption has size="medium".

This is some placeholder help text

This is some placeholder help text

This is some placeholder help text

<qtm-form-caption size="small"
>This is some placeholder help text</qtm-form-caption
>
<qtm-form-caption size="medium"
>This is some placeholder help text</qtm-form-caption
>
<qtm-form-caption size="large"
>This is some placeholder help text</qtm-form-caption
>

Disabled

Add disabled attribute in form caption to disable the element.

This is some placeholder help text
<qtm-form-caption disabled>This is some placeholder help text</qtm-form-caption>

Validation states

Error

Add state="error" in caption to changer its color in error state.

The field is required
<qtm-form-caption state="error">The field is required</qtm-form-caption>

Warning

Add state="warning" in caption to changer its color in warning state.

Enter a valid input
<qtm-form-caption state="warning">Enter a valid input</qtm-form-caption>

API

qtm-form-caption

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
size"large" | "medium" | "small"'medium'The size of element
state"error" | "success" | "warning"