Taiga UI 5.0 is out!

Label CORE

GitHub

On this page

See also

Checkbox, Radio, Switch, Block
Label is used to show text related to textfields, checkboxes, toggles and radio buttons

Basic 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <label tuiLabel>
        <input
            formControlName="testValue1"
            tuiCheckbox
            type="checkbox"
        />
        <span tuiTitle>
            Taiga UI
            <span tuiSubtitle>Angular UI Kit for awesome people</span>
        </span>
    </label>

    <label
        tuiLabel
        class="tui-space_vertical-2"
    >
        <input
            formControlName="testValue2"
            tuiCheckbox
            type="checkbox"
        />
        <span tuiTitle>
            <span>
                ng-polymorpheus&nbsp;
                <tui-icon tuiTooltip="Our first open-source project" />
            </span>
            <span tuiSubtitle>A tiny library for polymorphic templates in Angular</span>
        </span>
    </label>

    <label tuiLabel>
        <input
            formControlName="testValue3"
            tuiCheckbox
            type="checkbox"
        />
        <span tuiTitle>
            ng-dompurify
            <span tuiSubtitle>Inclusive Angular API for DOMPurify</span>
        </span>
    </label>
</form>

Small size 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <label tuiLabel>
        <input
            formControlName="value"
            size="s"
            tuiRadio
            type="radio"
            value="taiga"
        />
        <small>Taiga UI</small>
    </label>

    <label
        tuiLabel
        class="tui-space_vertical-2"
    >
        <input
            formControlName="value"
            size="s"
            tuiRadio
            type="radio"
            value="polymorpheus"
        />
        <small>ng-polymorpheus</small>
    </label>

    <label tuiLabel>
        <input
            formControlName="value"
            size="s"
            tuiRadio
            type="radio"
            value="dompurify"
        />
        <small>ng-dompurify</small>
    </label>
</form>

Switch 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <label tuiLabel>
        <input
            formControlName="testValue1"
            tuiSwitch
            type="checkbox"
        />
        Taiga UI
    </label>

    <label
        tuiLabel
        class="tui-space_vertical-2"
    >
        <input
            formControlName="testValue2"
            tuiSwitch
            type="checkbox"
        />
        ng-polymorpheus
    </label>

    <label tuiLabel>
        <input
            formControlName="testValue3"
            tuiSwitch
            type="checkbox"
        />
        ng-dompurify
    </label>
</form>

<form
    class="tui-space_top-4"
    [formGroup]="form"
>
    <label tuiLabel>
        <input
            formControlName="testValue1"
            size="s"
            tuiSwitch
            type="checkbox"
        />
        <small>Taiga UI</small>
    </label>

    <label
        tuiLabel
        class="tui-space_vertical-2"
    >
        <input
            formControlName="testValue2"
            size="s"
            tuiSwitch
            type="checkbox"
        />
        <small>ng-polymorpheus</small>
    </label>

    <label tuiLabel>
        <input
            formControlName="testValue3"
            size="s"
            tuiSwitch
            type="checkbox"
        />
        <small>ng-dompurify</small>
    </label>
</form>

Textfield 

    
      
    

      
      
    

  
    
      <form [formGroup]="form">
    <label tuiLabel>
        Label can be outside
        <tui-textfield>
            <input
                formControlName="value"
                tuiInput
            />
        </tui-textfield>
    </label>

    <tui-textfield class="tui-space_top-4">
        <label tuiLabel>Or inside textfield</label>
        <input
            formControlName="value"
            tuiInput
        />
    </tui-textfield>
</form>
GitHub StackBlitz