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

# Label

Labels a form control with optional supporting text.

```html
<noora-label label="Email" for="email" required></noora-label>
```

## Attributes

| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `""` | Sets the main label. |
| `sublabel` | `string` | None | Sets secondary label text. |
| `required` | `boolean` | `false` | Shows the required indicator. |
| `disabled` | `boolean` | `false` | Shows the disabled state. |
| `for` | `string` | None | Associates the label with a control identifier. |

## Styling parts

| Part | Description |
| --- | --- |
| `label` | The native label. |
| `sublabel` | The secondary label. |



## Basic labels

Show the same simple, required, and supporting-label variations as the LiveView component.

```html
<noora-label label="Email Address" for="email-address"></noora-label>
<noora-label label="Password" for="password" required></noora-label>
<noora-label label="Full Name" for="full-name" sublabel="(First and last name)"></noora-label>
<noora-label label="Company Email" for="company-email" sublabel="(Must be a work email address)" required></noora-label>
```

## Disabled labels

Use disabled label colors when the associated control is unavailable.

```html
<noora-label label="Organization" for="organization" disabled></noora-label>
<noora-label label="Deployment environment" for="deployment-environment" sublabel="Only organization administrators can change this setting" disabled></noora-label>
```

## Edge cases

Match the LiveView component's long and short label cases.

```html
<noora-label label="Very Long Label That Might Wrap to Multiple Lines in Narrow Containers" required></noora-label>
<noora-label label="API Key" sublabel="(This is a very long sublabel that provides detailed information about what this field should contain and how it will be used in the application)"></noora-label>
<noora-label label="ID" required></noora-label>
```
