AngularLynx

    Label

    A short caption in the form label style, for controls that don't have a label input of their own.

    ui-labelsrc/app/app.ts

    Installation

    npx @blotch/dolan add label
    import { UiLabel } from '../components/ui/label';

    Usage

    src/app/app.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import { UiLabel } from '../components/ui/label';
import { UiSwitch } from '../components/ui/switch';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, UiLabel, UiSwitch],
  template: `
    <view class="flex flex-row items-center justify-between">
      <ui-label>Wi-Fi</ui-label>
      <ui-switch [(checked)]="wifi" />
    </view>
  `,
})
export class App {
  protected readonly wifi = signal(true);
}
    • This example also uses Switch.
    • A label is text only. Tapping it doesn't toggle or focus the control next to it.
    • Input and Textarea draw their own label from a label input.

    Disabled

    <ui-label [disabled]="true">Airplane mode</ui-label>

    A disabled label dims to match a disabled control.

    API

    UiLabel

    InputTypeDefaultDescription
    disabledbooleanfalseDims the label.
    classstring''Extra Tailwind classes for the text.

    No outputs.