React Bootstrap Floating Label

A handy form input element with a floating label for react, styled to fit bootstrap projects
note This package does not require bootstrap, instead it has default "bootstrap-like" stylings which allow it to fit in nicely with bootstrap projects.

Installation

With npm:

npm install react-bootstrap-floating-label react

With a CDN:

<script src="https://unpkg.com/react-bootstrap-floating-label"></script>

Example usage

import FloatingLabel from "react-bootstrap-floating-label";

<FloatingLabel />
<FloatingLabel label="Name: " />
<FloatingLabel label="Name: " id="myLabel" style={{width: "40%"}} onChange={event => console.log(event.target.value) } />

Props

can be used completely without props, however you will likely want to pass in some props in order to customize it to your needs.

Prop	Type	Purpose
id	string	ID of the wrapper div
labelId	string	ID of the internal label element
inputId	string	ID of the internal input element
onChange	function	Callback function to run on change. Accepts parameter event
onChangeDelay	number	Number of milliseconds to delay onChange callback by. Will reset on new change events
onBlur	function	Callback function to run on blur. Accepts parameter event
onFocus	function	Callback function to run on focus. Accepts parameter event
className	string	Class(es) to apply to the wrapper div
labelClassName	string	Class(es) to apply to the internal label element
inputClassName	string	Class(es) to apply to the internal input element
type	string	HTML5 input type. Defaults to text
label	string	Label text to display inside input
style	object	React type styles to apply to the wrapper div
labelStyle	object	React type styles to apply to the internal label element
inputStyle	object	React type styles to apply to the internal input element