# Floating Input
Add a floating input element from your extension onto the web page. You can build extensions like auto complete, ChatGPT rewrites etc..
You will get the value entered into the input box and the position of the floating element. The position is taken care of to always be visible in the view port.
#### Install
Run these from your react project. `cs-root`, `popup` etc..
Install floating-ui
```
npm install @floating-ui/react
```
Add the floating input component
```
npx ChromeKit-Org/cli add-component floating-input
```
Copy the common directory into your react project's src directory.
#### Usage
Props
| Name | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| setIsRefEleActive |
Pass a state variable which will be set by the component when a input element is in focus.
Use this boolean to decide to render the floating element.
|
| floatEleRef | Ref of the floating element. This is the popup that will float next to the input element. |
| setFloatingStyles | State variable which will be set by the component for the position style of your floating element. |
| setInputWidth | State variable which will be set by the component of the width of the currently focussed input element. |
| setInputValue | State variable which will be set by the component with the value of the currently active input element. |
**Example:**
Checkout an example of `floating-input` here
