noora/docs/components/label.md
Labels a form control with optional supporting text.
<noora-label label="Email" for="email" required></noora-label>
| 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. |
| Part | Description |
|---|---|
label | The native label. |
sublabel | The secondary label. |
Show the same simple, required, and supporting-label variations as the LiveView component.
<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>
Use disabled label colors when the associated control is unavailable.
<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>
Match the LiveView component's long and short label cases.
<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>