# react-inputpicker > Two in one simple Input/autocomplete field in react Latest version **1.0.2-beta** (published 2019-01-01) · MIT license · 0 weekly downloads ## Install ```sh npm install react-inputpicker pnpm add react-inputpicker yarn add react-inputpicker bun add react-inputpicker ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2-beta | | Published | 2019-01-01 | | First published | 2019-01-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 154.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 7 | | Maintainers | uztech15 | | Keywords | react, react-inputpicker, inputpicker, select, autocomplete | ## Links - npm: https://www.npmjs.com/package/react-inputpicker - Repository: https://github.com/uzairalam15/react-inputpicker - Homepage: https://github.com/uzairalam15/react-inputpicker#readme - Issues: https://github.com/uzairalam15/react-inputpicker/issues - npm.io page: https://npm.io/package/react-inputpicker ## Dependencies (4) - [flexboxgrid](https://npm.io/package/flexboxgrid.md) ^6.3.1 - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.3 - [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.8 - [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.5.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.0.2-beta (latest) — 2019-01-01 - 1.0.1 — 2019-01-01 ## README # React Input Picker ![Input Picker](https://img.shields.io/badge/npm-v1.0.2--beta-blue.svg) ![Input Picker](https://img.shields.io/badge/react-v%20%3E%3D%2016.x.x-green.svg) ![Input Picker](./SS/1.png) # Note: (This is a beta realese of this package and may contain some bugs. please for now refrain from using it in production) A simple Input picker for React with listing and selection. Future enhancements will include custom listing so that the user can apply custom styling to options and dropdown. The Screenshot attached above is the sample when there is dropdown: **Enabled**, remove-control: **Enabled** and having the control-width default to **1**. The data that you want to show in the dropdown can be passed in **data** prop into the input picker. ``` ``` You can also pass the **filterFunction** which you want to apply when the user types into the input field and show in the dropdown accordingly. The default function that will be happening will be a text search as the user types in. ``` ``` If you wish to disable all the controls and make it a simple input field you can do the following: Pass the **disableControls** prop as **true** so that it becomes a simple input dropdown. ``` ``` ![Disable Controls](./SS/disableControls.png) If you wish to just disable the remove icon from the input pass the **disableRemove** prop as **true** so the there is no remove icon. ``` ``` ![Disable Remove](./SS/disableRemove.png) If you wish to disable the dropdown on the input field pass the **disableDropdown** prop as **true**. ``` ``` You can also change the width of the controls showing on the input by passing the prop **controlWidth** with your desired value the default value is **1** ``` ``` ![Controls width](./SS/controlsWidth.png) # Properties | Property | type | params | Function | | --------------- | ---------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | data | Array of objects | [{ label: "Text1", value: "Text1" }] | To pass the data into the input picker | | filterFunction | Function | fn(value:String, data:Array, options:Object) | Filter function that you want to apply on the data. (optional)
**Default**: Will do a text search. | | filterOptions | Object | {trim: true, strictMatch: false, exactMatch: false} | Filter function options that you can override. | | disableControls | Boolean | - | Disables all the controls and make it the simple input field. (optional)
**boolean**: `true/false`
**Default**: `false` | | disableDropdown | Boolean | | Disables showing the dropdown. (optional)
**boolean**: `true/false`
**Default**: `false` | | disableRemove | Boolean | | Disables showing the remove icon. (optional)
**boolean**: `true/false`
**Default**: `false` | | controlWidth | Number | 1 to 12 | Sets the width of the control as required (optional)
**Number**: `1/2/3`
**Default**: `1` | --- _Source: https://npm.io/package/react-inputpicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._