This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 1,000,000+ packages pre-installed, including
@tkrotoff/bootstrap-floating-label with all
npm packages installed. Try it out:
@tkrotoff/bootstrap-floating-label lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Floating label for Bootstrap 4
:placeholder-shownnot supported and Can I use placeholder-shown?)
The Nielsen Norman Group talks about "Placeholders and Floating Labels disadvantages"
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';
<input> inside your Bootstrap code:
<div class="floating-label"> <input type="email" id="email" class="form-control" placeholder="email@example.com"> <label for="email">Email</label> </div>
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
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