### File

`src/input/label.component.ts`

### Description

See demo

     * <ibm-label labelState="success">
     *     <label label>Field with success</label>
     *     <input type="text" class="input-field">
     * </ibm-label>
     *
     * <ibm-label labelState="warning">
     *     <label label>Field with warning</label>
     *     <input type="text" class="input-field">
     * </ibm-label>
     *
     * <ibm-label labelState="error">
     *     <label label>Field with error</label>
     *     <input type="text" class="input-field">
     * </ibm-label>
     *

../../iframe.html?id=input--label

### Implements

`AfterContentInit`

### Metadata

selector | `ibm-label`

template

    <label
    	[for]="labelInputID"
    	class="bx--label"
    	[ngClass]="{
    		'bx--skeleton': skeleton
    	}">
    	<ng-content></ng-content>
    </label>
    <div *ngIf="!skeleton" class="bx--form__helper-text">{{helperText}}</div>
    <div class="bx--text-input__field-wrapper" [attr.data-invalid]="(invalid ? true : null)" #wrapper>
    	<ibm-icon-warning-filled16
    		*ngIf="invalid"
    		class="bx--text-input__invalid-icon bx--text-area__invalid-icon">
    	</ibm-icon-warning-filled16>
    	<ng-content select="input,textarea,div"></ng-content>
    </div>
    <div *ngIf="invalid" class="bx--form-requirement">
    	<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    	<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    </div>

### Index

###### Properties

- Static labelCounter
- labelInputID
- wrapper

###### Methods

- Public isTemplate
- ngAfterContentInit

###### Inputs

- helperText
- invalid
- invalidText
- labelState
- skeleton

###### HostBindings

- class.bx--form-item

### Constructor

`constructor()`
Defined in src/input/label.component.ts:92
Creates an instance of Label.

### Inputs

`helperText` | Optional helper text that appears under the label. Type : `string`
Defined in src/input/label.component.ts:80

`invalid` | Set to `true` for an invalid label component. Default value : `false`
Defined in src/input/label.component.ts:88

`invalidText` | Sets the invalid text. Type : `string | TemplateRef<any>`
Defined in src/input/label.component.ts:84

`labelState` | State of the `Label` will determine the styles applied. Type : `"success" | "warning" | "error" | ""` Default value : `""`
Defined in src/input/label.component.ts:72

`skeleton` | Set to `true` for a loading label. Default value : `false`
Defined in src/input/label.component.ts:76

### HostBindings

class.bx--form-item
`class.bx--form-item: ```
Default value : `true`
Defined in src/input/label.component.ts:92

### Methods

Public isTemplate
`isTemplate(value)`
Defined in src/input/label.component.ts:108

Parameters :

Name | Optional
value | No

Returns : `boolean`

ngAfterContentInit
`ngAfterContentInit()`
Defined in src/input/label.component.ts:104
Sets the id on the input item associated with the `Label`. Returns : `void`

### Properties

Static labelCounter
`labelCounter: `number``
Type : `number`
Default value : `0`
Defined in src/input/label.component.ts:62
Used to build the id of the input item associated with the `Label`.

labelInputID
`labelInputID: ```
Default value : `"ibm-label-" + Label.labelCounter`
Defined in src/input/label.component.ts:67
The id of the input item associated with the `Label`. This value is also used to associate the `Label` with its input counterpart through the 'for' attribute.

wrapper
`wrapper: `ElementRef<HTMLDivElement>``
Type : `ElementRef<HTMLDivElement>`
Decorators : `@ViewChild('wrapper')`
Defined in src/input/label.component.ts:90

    import {
    	Component,
    	Input,
    	AfterContentInit,
    	ElementRef,
    	HostBinding,
    	TemplateRef,
    	ViewChild
    } from "@angular/core";

    /**
     * [See demo](../../?path=/story/input--label)
     *
     * ```html
     * <ibm-label labelState="success">
     * 	<label label>Field with success</label>
     * 	<input type="text" class="input-field">
     * </ibm-label>
     *
     * <ibm-label labelState="warning">
     * 	<label label>Field with warning</label>
     * 	<input type="text" class="input-field">
     * </ibm-label>
     *
     * <ibm-label labelState="error">
     * 	<label label>Field with error</label>
     * 	<input type="text" class="input-field">
     * </ibm-label>
     * ```
     *
     * <example-url>../../iframe.html?id=input--label</example-url>
     */
    @Component({
    	selector: "ibm-label",
    	template: `
    		<label
    			[for]="labelInputID"
    			class="bx--label"
    			[ngClass]="{
    				'bx--skeleton': skeleton
    			}">
    			<ng-content></ng-content>
    		</label>
    		<div *ngIf="!skeleton" class="bx--form__helper-text">{{helperText}}</div>
    		<div class="bx--text-input__field-wrapper" [attr.data-invalid]="(invalid ? true : null)" #wrapper>
    			<ibm-icon-warning-filled16
    				*ngIf="invalid"
    				class="bx--text-input__invalid-icon bx--text-area__invalid-icon">
    			</ibm-icon-warning-filled16>
    			<ng-content select="input,textarea,div"></ng-content>
    		</div>
    		<div *ngIf="invalid" class="bx--form-requirement">
    			<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
    			<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    		</div>
    	`
    })
    export class Label implements AfterContentInit {
    	/**
    	 * Used to build the id of the input item associated with the `Label`.
    	 */
    	static labelCounter = 0;
    	/**
    	 * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
    	 * its input counterpart through the 'for' attribute.
    	 */
    	labelInputID = "ibm-label-" + Label.labelCounter;

    	/**
    	 * State of the `Label` will determine the styles applied.
    	 */
    	@Input() labelState: "success" | "warning" | "error" | "" = "";
    	/**
    	 * Set to `true` for a loading label.
    	 */
    	@Input() skeleton = false;
    	/**
    	 * Optional helper text that appears under the label.
    	 */
    	@Input() helperText: string;
    	/**
    	 * Sets the invalid text.
    	 */
    	@Input() invalidText: string | TemplateRef<any>;
    	/**
    	 * Set to `true` for an invalid label component.
    	 */
    	@Input() invalid = false;

    	@ViewChild("wrapper") wrapper: ElementRef<HTMLDivElement>;

    	@HostBinding("class.bx--form-item") labelClass = true;

    	/**
    	 * Creates an instance of Label.
    	 */
    	constructor() {
    		Label.labelCounter++;
    	}

    	/**
    	 * Sets the id on the input item associated with the `Label`.
    	 */
    	ngAfterContentInit() {
    		this.wrapper.nativeElement.querySelector("input,textarea,div").setAttribute("id", this.labelInputID);
    	}

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""