Label web component

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Basic labels

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>

Disabled labels

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>

Edge cases

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>