React form element with floating label text
npm install react-bootstrap-floating-label!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";
`
Props
| Prop | Type | Purpose |
| -------------- | ---------- | ------------------------------------------------------------------------------------- |
| id | string | ID of the wrapper div |string
| labelId | | ID of the internal label element |string
| inputId | | ID of the internal input element |function
| onChange | | Callback function to run on change. Accepts parameter event |number
| onChangeDelay | | Number of milliseconds to delay onChange callback by. Will reset on new change events |function
| onBlur | | Callback function to run on blur. Accepts parameter event |function
| onFocus | | Callback function to run on focus. Accepts parameter event |string
| className | | Class(es) to apply to the wrapper div |string
| labelClassName | | Class(es) to apply to the internal label element |string
| inputClassName | | Class(es) to apply to the internal input element |string
| type | | HTML5 input type. Defaults to text |string
| label | | Label text to display inside input |object
| style | | React type styles to apply to the wrapper div |object
| labelStyle | | React type styles to apply to the internal label element |object` | React type styles to apply to the internal input element |
| inputStyle |