Miss any of our Open RFC calls?Watch the recordings here! »

@tkrotoff/bootstrap-floating-label

0.7.0 • Public • Published

@tkrotoff/bootstrap-floating-label

npm version Build status Prettier Airbnb Code Style

Floating label for Bootstrap 4

demo

Example: https://codesandbox.io/s/github/tkrotoff/bootstrap-floating-label/tree/codesandbox.io

The Nielsen Norman Group talks about "Placeholders and Floating Labels disadvantages"

Usage

npm install @tkrotoff/bootstrap-floating-label

Import bootstrap-floating-label.scss after bootstrap.scss:

@import '~bootstrap/scss/bootstrap';
 
@import '~@tkrotoff/bootstrap-floating-label/src/bootstrap-floating-label';

Place <label> under <input> inside your Bootstrap code:

<div class="floating-label">
  <input type="email" id="email" class="form-control" placeholder="name@example.com">
  <label for="email">Email</label>
</div>

Limitations

There is no good way to detect if the user entered text inside an input using CSS.

Thus a placeholder is required (<input placeholder="...">, see https://codepen.io/tkrotoff/pen/KjgyZj) otherwise the label will be above the input instead of inside.

With React, the CSS works in most cases because React populates the value attribute. Still a placeholder is required with <input type="number">. Because when the user enters something different than a number, the HTMLInputElement.value property is empty (and ValidityState.badInput is true), see https://codepen.io/tkrotoff/pen/RLQQqo. A placeholder is also required with <input type="date">.

Install

npm i @tkrotoff/bootstrap-floating-label

DownloadsWeekly Downloads

146

Version

0.7.0

License

MIT

Unpacked Size

18.6 kB

Total Files

9

Last publish

Collaborators

  • avatar