Back to Tuist

HintText

noora/docs/components/hinttext.md

4.204.01.3 KB
Original Source
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

HintText

Provides supporting or validation text for a form field.

html
<noora-hint-text label="Use at least 12 characters"></noora-hint-text>

Attributes

AttributeType or allowed valuesDefaultDescription
labelstring""Sets the hint text.
variantdefault, destructive, disabled"default"Controls the semantic presentation.

Styling parts

PartDescription
hintThe hint container.

Variants

Communicate default, destructive, and disabled supporting text.

html
<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.

html
<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>