Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/label.md
<!-- 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>
```