@material/floating-label

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

• Material Design guidelines: Text Fields Layout
• Demo with Text Field

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.

Similar packages

Other packages similar to @material/floating-label

react-floating-label-input

react-floating-label-input is a React component that provides similar functionality to @material/floating-label. It allows you to create floating labels for input fields in a React application. Unlike @material/floating-label, which is part of the MDC Web library, react-floating-label-input is specifically designed for React.

floating-label-react

floating-label-react is another React component for creating floating labels. It offers similar features to @material/floating-label but is tailored for use in React applications. It provides a simple API for integrating floating labels with input fields.

vue-mdc-adapter

vue-mdc-adapter is a library that integrates Material Components for the Web with Vue.js. It includes a floating label component similar to @material/floating-label. This package is ideal for Vue.js developers who want to use Material Design components in their applications.