Package Exports

@material/floating-label
@material/floating-label/constants
@material/floating-label/dist/mdc.floating-label.css
@material/floating-label/dist/mdc.floatingLabel
@material/floating-label/dist/mdc.floatingLabel.js
@material/floating-label/foundation
@material/floating-label/foundation.js
@material/floating-label/index

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/floating-label) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Floating Label

Floating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's placeholder attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the Text Field.

Design & API Documentation

Basic Usage

HTML Structure

<label class="mdc-floating-label" for="my-text-field-id">Hint text</label>

Styles

@import "@material/floating-label/mdc-floating-label";

JavaScript Instantiation

import {MDCFloatingLabel} from '@material/floating-label';

const floatingLabel = new MDCFloatingLabel(document.querySelector('.mdc-floating-label'));

Variants

Avoid Dynamic ID Generation

If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign a unique id to each <input> by wrapping mdc-text-field__input within a <label>:

<label class="mdc-text-field">
  <input type="text" class="mdc-text-field__input">
  <span class="mdc-floating-label">Hint Text</span>
  <div class="mdc-text-field__bottom-line"></div>
</label>

NOTE: This method also works with <select>.

Style Customization

CSS Classes

CSS Class	Description
`mdc-floating-label`	Mandatory.
`mdc-floating-label--float-above`	Indicates the label is floating in the floating position.
`mdc-floating-label--shake`	Shakes the label.

Sass Mixins

Mixin	Description
`mdc-floating-label-ink-color($color)`	Customizes the ink color of the label.
`mdc-floating-label-fill-color($color)`	Customizes the fill color of the label.
`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)`	Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.
`mdc-floating-label-shake-animation($modifier)`	Applies shake keyframe animation to label.
`mdc-floating-label-float-position($positionY, $positionX, $scale)`	Sets position of label when floating.

`MDCFloatingLabel` Properties and Methods

Method Signature	Description
`shake(shouldShake: boolean) => void`	Proxies to the foundation's `shake()` method.
`float(shouldFloat: boolean) => void`	Proxies to the foundation's `float()` method.
`getWidth() => number`	Proxies to the foundation's `getWidth()` method.

Usage Within Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Floating Label for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

`MDCFloatingLabelAdapter`

Method Signature	Description
`addClass(className: string) => void`	Adds a class to the label element.
`removeClass(className: string) => void`	Removes a class from the label element.
`getWidth() => number`	Returns the width of the label element.

`MDCFloatingLabelFoundation`

Method Signature	Description
`shake(shouldShake: boolean)`	Shakes or stops shaking the label, depending on the value of `shouldShake`.
`float(shouldFloat: boolean)`	Floats or docks the label, depending on the value of `shouldFloat`.
`getWidth() => number`	Returns the width of the label element.

@material/floating-label