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

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

## Styling parts

| Part | Description |
| --- | --- |
| `hint` | The 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>
```
