Package Exports

@material/floating-label
@material/floating-label/component
@material/floating-label/component.js
@material/floating-label/constants
@material/floating-label/constants.js
@material/floating-label/dist/mdc.floating-label.css
@material/floating-label/dist/mdc.floating-label.min.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
@material/floating-label/index.js

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

Installation

npm install @material/floating-label

Basic Usage

HTML Structure

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

Styles

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

JavaScript Instantiation

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

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

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.
`mdc-floating-label--required`	Indicates the label is required and adds an asterisk.

Sass Mixins

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

`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.
`setRequired(isRequired: boolean) => void`	Proxies to the foundation's `setRequired()` 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.
`registerInteractionHandler(evtType: string, handler: EventListener) => void`	Registers an event listener for a given event.
`deregisterInteractionHandler(evtType: string, handler: EventListener) => void`	Deregisters an event listener for a given event.

`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`.
`setRequired(isRequired: boolean)`	Styles the label as required, depending on the value of `isRequired`.
`getWidth() => number`	Returns the width of the label element.

@material/floating-label