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 |