Form Caption

FormCaption element is a message (hint, error message, counter value, etc) that appears below the inputs.

This is some placeholder help text

<FormCaption>This is some placeholder help text</FormCaption>

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

<FormCaption size="small">This is some placeholder help text</FormCaption>
<FormCaption size="medium">This is some placeholder help text</FormCaption>
<FormCaption size="large">This is some placeholder help text</FormCaption>

Disabled

Add disabled attribute in form caption to disable the element.

This is some placeholder help text

<FormCaption disabled>This is some placeholder help text</FormCaption>

Validation states

Error

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

The field is required

<FormCaption state="error">The field is required</FormCaption>

Warning

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

Enter a valid input

<FormCaption state="warning">Enter a valid input</FormCaption>

Success

Add state="success" in caption to change its color in success state.

Input is valid

<FormCaption state="success">Input is valid</FormCaption>

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Custom colored caption

<FormCaption classes="text-purple-500">Custom colored caption</FormCaption>

Event handling

Not applicable. The FormCaption component is a visual element that displays text below form inputs and does not support any event handlers directly.

API

QtmFormCaption

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
size	"large" | "medium" | "small"	'medium'	The size of element
state	"error" | "success" | "warning"