Angular Floating Labels Component

Floating Labels

Angular floating label component. Create beautifully simple form labels that float over your input fields.

Available in Other JavaScript Frameworks

CoreUI Angular Floating Labels Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Example

Wrap a pair of cFormControl and label elements in cFormControl to enable floating labels with textual form fields. A placeholder is required on each input as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the cFormControl must come first so we can utilize a sibling selector (ex., ~).

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormControlDirective, FormFloatingDirective, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-floating-labels',
  templateUrl: './floating-labels.component.html',
  imports: [ReactiveFormsModule, FormsModule, FormFloatingDirective, FormControlDirective, FormLabelDirective]
})
export class FloatingLabelsComponent {}

<form>
  <div [cFormFloating]="true" class="mb-3">
    <input cFormControl id="floatingInput" placeholder="[email protected]" type="email" />
    <label cLabel for="floatingInput">Email address</label>
  </div>
  <div cFormFloating>
    <input cFormControl id="floatingPassword" placeholder="Password" type="password" autocomplete="off" />
    <label cLabel for="floatingPassword">Password</label>
  </div>
</form>

When there’s a value already defined, cLabel will automatically adjust to their floated position.

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormControlDirective, FormFloatingDirective, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-floating-labels-2',
  templateUrl: './floating-labels-2.component.html',
  imports: [ReactiveFormsModule, FormsModule, FormFloatingDirective, FormControlDirective, FormLabelDirective]
})
export class FloatingLabels2Component {}

<form cFormFloating>
  <input
    cFormControl
    id="floatingInputValue"
    type="email"
    value="[email protected]"
    placeholder
  />
  <label cLabel for="floatingInputValue">Input with value</label>
</form>

Textareas

By default, textarea will be the same height as input.

import { Component } from '@angular/core';
import { FormControlDirective, FormFloatingDirective, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-floating-labels-textareas',
  templateUrl: './floating-labels-textareas.component.html',
  imports: [FormFloatingDirective, FormControlDirective, FormLabelDirective]
})
export class FloatingLabelsTextareasComponent {}

<div cFormFloating>
  <textarea cFormControl id="floatingTextarea" placeholder="Leave a comment here"></textarea>
  <label cLabel for="floatingTextarea">Comments</label>
</div>

To set a custom height on your textarea, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

import { NgStyle } from '@angular/common';
import { Component } from '@angular/core';
import { FormControlDirective, FormFloatingDirective, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-floating-labels-textareas-2',
  templateUrl: './floating-labels-textareas-2.component.html',
  imports: [FormFloatingDirective, FormControlDirective, NgStyle, FormLabelDirective]
})
export class FloatingLabelsTextareas2Component {}

<div cFormFloating>
  <textarea [ngStyle]="{ 'height.px': 100 }" cFormControl id="floatingTextarea2" placeholder="Leave a comment here"></textarea>
  <label cLabel for="floatingTextarea2">Comments</label>
</div>

Selects

Other than input, floating labels are only available on cSelect. They work in the same way, but unlike input, it always shows the cLabel in its floated state.

Selects with size and multiple are not supported.

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormFloatingDirective, FormLabelDirective, FormSelectDirective } from '@coreui/angular';

@Component({
  selector: 'docs-floating-labels-selects',
  templateUrl: './floating-labels-selects.component.html',
  imports: [FormFloatingDirective, FormSelectDirective, ReactiveFormsModule, FormLabelDirective]
})
export class FloatingLabelsSelectsComponent {}

<div cFormFloating>
  <select cSelect id="floatingSelect">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label cLabel for="floatingSelect">Works with selects</label>
</div>

Layout

When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import {
  ColComponent,
  FormControlDirective,
  FormFloatingDirective,
  FormLabelDirective,
  FormSelectDirective,
  GutterDirective,
  RowComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-floating-labels-layout',
  templateUrl: './floating-labels-layout.component.html',
  imports: [
    RowComponent,
    GutterDirective,
    ColComponent,
    FormFloatingDirective,
    FormControlDirective,
    FormLabelDirective,
    FormSelectDirective,
    ReactiveFormsModule
  ]
})
export class FloatingLabelsLayoutComponent {}

<c-row [gutter]="{g: 2}">
  <c-col [md]>
    <div cFormFloating>
      <input
        cFormControl
        id="floatingInputGrid"
        type="email"
        value="[email protected]"
        placeholder
      />
      <label cLabel for="floatingInputGrid">Email address</label>
    </div>
  </c-col>
  <c-col [md]>
    <div cFormFloating>
      <select cSelect id="floatingSelectGrid">
        <option>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label cLabel for="floatingSelectGrid">Works with selects</label>
    </div>
  </c-col>
</c-row>

API reference

Form Module

cFormFloating

directive

jsx

import { FormFloatingDirective } from '@coreui/angular'

Property	Default	Type
cFormFloating	`true`	`boolean`
Enable floating labels