Angular Floating Labels

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

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_ |