Sign Up for Free

RunKit +

Try any Node.js package right in your browser

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:

require("bootstrap/package.json"); // bootstrap is a peer dependency. // require("@tkrotoff/bootstrap-floating-label/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@tkrotoff/bootstrap-floating-label v0.7.0

Bootstrap 4 Floating Label

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free