# react-bootstrap-floating-label > React form element with floating label text Latest version **1.6.0** (published 2021-06-21) · MIT license · 0 weekly downloads ## Install ```sh npm install react-bootstrap-floating-label pnpm add react-bootstrap-floating-label yarn add react-bootstrap-floating-label bun add react-bootstrap-floating-label ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.6.0 | | Published | 2021-06-21 | | First published | 2021-01-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 31.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Brennan Wilkes | | Maintainers | br.wilkes | | Keywords | React, Bootstrap, form, form element, floating, label | ## Links - npm: https://www.npmjs.com/package/react-bootstrap-floating-label - Repository: https://github.com/brennanwilkes/react-bootstrap-floating-label - Homepage: https://github.com/brennanwilkes/react-bootstrap-floating-label#readme - Issues: https://github.com/brennanwilkes/react-bootstrap-floating-label/issues - npm.io page: https://npm.io/package/react-bootstrap-floating-label ## Dependencies (1) - [react-icons](https://npm.io/package/react-icons.md) ^4.2.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.6.0 (latest) — 2021-06-21 - 1.5.0 — 2021-05-23 - 1.4.13 — 2021-03-18 - 1.4.12 — 2021-03-15 - 1.4.11 — 2021-03-02 - 1.4.10 — 2021-02-21 - 1.4.9 — 2021-02-21 - 1.4.8 — 2021-02-21 - 1.4.7 — 2021-02-21 - 1.4.6 — 2021-02-21 - 1.4.5 — 2021-02-21 - 1.4.4 — 2021-02-21 - 1.4.3 — 2021-02-21 - 1.4.2 — 2021-02-21 - 1.4.1 — 2021-02-21 - … 13 more at https://npm.io/package/react-bootstrap-floating-label/versions ## README # React Bootstrap Floating Label ![version](https://img.shields.io/npm/v/react-bootstrap-floating-label?style=for-the-badge) ![updated](https://img.shields.io/github/last-commit/brennanwilkes/react-bootstrap-floating-label?style=for-the-badge) ![size](https://img.shields.io/bundlephobia/minzip/react-bootstrap-floating-label?style=for-the-badge) ![react](https://img.shields.io/github/package-json/dependency-version/brennanwilkes/react-bootstrap-floating-label/dev/react?color=black&style=for-the-badge) ![license](https://img.shields.io/github/license/brennanwilkes/react-bootstrap-floating-label?style=for-the-badge) ![issues](https://img.shields.io/github/issues/brennanwilkes/react-bootstrap-floating-label?style=for-the-badge) ![contributors](https://img.shields.io/github/contributors/brennanwilkes/react-bootstrap-floating-label?style=for-the-badge) ![downloads](https://img.shields.io/npm/dt/react-bootstrap-floating-label?style=for-the-badge) 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 | --- _Source: https://npm.io/package/react-bootstrap-floating-label · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._