Hint Text

Provides supporting or validation text for a form field.

HintText web component

Provides supporting or validation text for a form field.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Variants

Communicate default, destructive, and disabled supporting text.

<noora-hint-text label="Use at least eight characters"></noora-hint-text>
<noora-hint-text variant="destructive" label="This field is required"></noora-hint-text>
<noora-hint-text variant="disabled" label="Available after setup"></noora-hint-text>

Content examples

Support validation, guidance, limits, and availability messages.

<noora-hint-text label="Your profile is visible to teammates"></noora-hint-text>
<noora-hint-text label="Maximum 200 characters"></noora-hint-text>
<noora-hint-text variant="destructive" label="Enter a valid email address"></noora-hint-text>
<noora-hint-text variant="disabled" label="Connect a project to continue"></noora-hint-text>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`""`	Sets the hint text.
`variant`	default, destructive, disabled	`"default"`	Controls the semantic presentation.

Styling parts

Name	Description
`hint`	The hint container.