DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/material__floating-label package

    14.0.0 • Public • Published

    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


    npm install @material/floating-label

    Basic Usage

    HTML Structure

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


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


    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.


    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.


    npm i @material/floating-label

    DownloadsWeekly Downloads






    Unpacked Size

    220 kB

    Total Files


    Last publish


    • yefim
    • abhiomkar
    • azakus
    • bicknellr
    • material-admin
    • aprigogin
    • patrickrodee
    • aomarks
    • emarquez
    • allanchen
    • esgonzalez
    • asyncliz
    • candysonya
    • ssuarez
    • taylorv