Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Floating Labels Component

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

## 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., `~`).

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

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

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).

## 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.**

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

--- ## API reference ### Form Module --- ### cFormFloating _directive_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `cFormFloating` | Enable floating labels. | `boolean` | _true_ |