14.0.0 • Published 5 months ago

@material/floating-label v14.0.0

Weekly downloads
60,967
License
MIT
Repository
github
Last release
5 months ago

Floating Label

Floating labels display the type of input a field requires. Every text field and select should have a label. 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

Usage

HTML Structure

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

Usage within mdc-text-field

<div class="mdc-text-field">
  <input type="text" id="my-text-field-id" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
  <div class="mdc-text-field__bottom-line"></div>
</div>

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>

CSS Classes

CSS ClassDescription
mdc-floating-labelMandatory.
mdc-floating-label--float-aboveIndicates the label is floating above the text field.
mdc-floating-label--shakeShakes the label.

SCSS Mixins

MixinDescription
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

Method SignatureDescription
shake(shouldShake: boolean) => voidShakes or stops shaking the label, depending on the value of shouldShake. Proxies to the foundation method of the same name.
float(shouldFloat: boolean) => voidFloats or docks the label, depending on the value of shouldFloat. Proxies to the foundation method of the same name.
getWidth() => numberReturns the width of the label element.

MDCFloatingLabelAdapter

Method SignatureDescription
addClass(className: string) => voidAdds a class to the label element.
removeClass(className: string) => voidRemoves a class from the label element.
getWidth() => numberReturns the width of the label element.

MDCFloatingLabelFoundation

Method SignatureDescription
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() => numberReturns the width of the label element.
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.2.0

5 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.42.0

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.40.0

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.36.0

6 years ago

0.35.2

6 years ago

0.35.0

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago