React Bootstrap Floating Label

!version
!updated
!size
!react

!license
!issues
!contributors
!downloads

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:
``sh
npm install react-bootstrap-floating-label react
`

With a CDN:
`html

`

Example usage
`js
import FloatingLabel from "react-bootstrap-floating-label";



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 |