Skip to content

Label Specification

Stanimir Dimitrov edited this page May 12, 2017 · 1 revision

igxLabel should engage with input field and float above the input field when focused. igxLabel could be used as standalone component to represent some string.


The igxLabel directive is intended to be used on single-line text elements to add additional CSS styles. It is especially useful when combined with igx-switch, igx-checkbox, and or igx-avatar components.

User Stories


As a developer I want to be able to easily transform element to a label by using angular directive principles. Also I want to combine that text with other components.

<target-element igxLabel [..options]>Click me</target-element>

In combination:

<div class="igx-form-group">
    <input type="text" igxInput [(ngModel)]=""/>
    <label igxLabel>Username</label>

End user

  • Standalone text content.
  • With association with other components (example: input).

Acceptance criteria

  1. Show plain text (content).
  2. Floating inline Label that moves above certain field. When text is entered in some input, the label moves above the input field and changes its font-size and color.


End User Experience

The Label should always display text or any other string representation.

Developer Experience

Use it as directive to span element for example:

<span igxLabel>Some text<span>
Clone this wiki locally
You can’t perform that action at this time.