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>

API

The FormCaption component accepts all the props a standard <p> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLParagraphElement>. See more about supported HTML props in React's documentation.

Loading API documentation...