Hint

The footnote under a field: an info glyph, a line of guidance or the error, and an optional note on the right. Satoshi Medium 12, 6px gaps.

DesignReactVuePrompts

Copy

This is a hint text to help user.Info Here

1

2

3

import { FieldHintText } from '@orvain/react';
 
<FieldHintText hint="We'll never share your email." />

Add an Orvain Hint reading “This is a hint text to help user.”, with “Info Here” on the right.

Orvain MCPIncluded with the library

When to use#

• For format guidance that prevents mistakes: At least 8 characters.
• For the error once a field is checked, saying how to fix it.

When not to use

• Use an Alert for messages about the whole form or page.

Anatomy#

States#

Source#

Preview – final code pending

The Hint is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published

Used in these blocks