# material-ui-enhanced-fields > Enhanced fields for material-ui. A TextFields with prefix, suffix and typeahead. A Combobox / autocomplete / typeahead with optional Chip input. Fully-customizable but with simple defaults. Latest version **2.0.0** (published 2018-03-15) · MIT license · 0 weekly downloads ## Install ```sh npm install material-ui-enhanced-fields pnpm add material-ui-enhanced-fields yarn add material-ui-enhanced-fields bun add material-ui-enhanced-fields ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2018-03-15 | | First published | 2018-02-07 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 23.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Joshua Freedman | | Maintainers | jf248 | | Keywords | react, material-ui, enhanced fields, combobox, autocomplete, typeahead, select field, chip, chip input, chip field, downshift | ## Links - npm: https://www.npmjs.com/package/material-ui-enhanced-fields - Repository: https://github.com/jf248/material-ui-enhanced-fields - Homepage: https://github.com/jf248/material-ui-enhanced-fields#readme - Issues: https://github.com/jf248/material-ui-enhanced-fields/issues - npm.io page: https://npm.io/package/material-ui-enhanced-fields ## Dependencies (6) - [downshift](https://npm.io/package/downshift.md) ^1.27.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 - [material-ui](https://npm.io/package/material-ui.md) ^1.0.0-beta.31 - [material-ui-icons](https://npm.io/package/material-ui-icons.md) ^1.0.0-beta.17 - [@jf248/react-powerplug](https://npm.io/package/@jf248/react-powerplug.md) 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 - 2.0.0 (latest) — 2018-03-15 - 1.0.2 (next) — 2018-02-15 - 1.0.3 — 2018-03-12 - 1.0.1 — 2018-02-15 - 1.0.0 — 2018-02-14 - 0.1.1 — 2018-02-07 - 0.1.0 — 2018-02-07 ## README # material-ui-enhanced-fields A collection of enhanced fields for use with [material-ui](material-ui) (v1 beta). - A [ComboboxField](#ComboboxField). ![demo2.gif](demo2.gif) See [storybook][storybook] for live demos. ## Install ``` yarn add material-ui-enhanced-fields@next ``` ``` npm i material-ui-enhanced-fields@next ``` ## Components - [ComboboxField](#ComboboxField) ### ComboboxField A customisable 'combobox' field that allows both text input and selection from a drop-down menu. With `multiple` set to `false` (default) the selected value is displayed as text in the `` element. With `multiple` set to `true` selectedItems are stored in a prefix. The default rendering is `Chip`'s. Items can be grouped into sublist by supplying the a `groupField` prop (default is 'group'). Based on the [Downshift](Downshift) library. #### Basic Examples ```jsx const DATA = ['apples', 'oranges']; ``` ```jsx const DATA = [{text: 'apple', type: 'fruit'}, {text: 'tomato', type: 'veg'}]; item === null ? '' : item.text} groupField={'type'} TextFieldProps={{ floatingLabelText: 'Pick a food' }} /> ``` #### Props prop | type | default | description --- | --- | --- | --- `classes` | `Object` || Override the CSS classes (see implementation). `className` | 'string' || CSS class for the root element. `filterFunc` | `function(items: Array, query: string)` | | Override the default function for filtering the items based on the field's input value. `items` | `Array` | `[]` | The array of possible items to select. `groupField` | `string` | `'group'` | The name of the key to group each item object by. (Optional, if items aren't objects or don't have a field to group by, they won't be grouped.) `menuBottomElement` | `Object` || An element to display at the bottom of the menu. `menuBottomFixed` | `boolean` | `true` | Fix the `menuBottom` element so it's reachable without scrolling. `MenuProps` | `Object` || Props to be merged into the `Menu` component. `multiple` | `boolean` | `false` | Allow multiple selected items. `noMatchProps` | `Object` || Props to be merged to the component displayed when there are no matched items. `noMatchText` | `node` || Text to be displayed if there are no matched items to display in the menu. `renderMenuItem` | `function({downShiftProps: {}, index: number, item: any, key: string, selectedItems: Array})` || Override the default rendering of each menu item. Should return an element that employ's the Downshift getItemProps 'prop getter' function. See source code and [Downshift](Downshift). `renderSelectedItem` | `function({deselect: function, hasFocus: boolean, item: any, itemToString: function})` || Override the default rendering (uses `Chip`s) of each selected item. (Only applies when the `multiple` is `true`.) `deselect`: A callback that will deselect the item. `hasFocus`: True if item has been focused with keyboard. `item`: The item to render. `itemToString`: The `itemToString` prop supplied for convenience. `SubheaderProps` | `Object` || Props to be merged ino each `Subheader`. `TextFieldProps` | `Object` || Props for the `TextField` component. > In addtion, you can pass all the props of the `Downshift` component, except the `inputValue`. [See here.](Downshift) [storybook]: https://jf248.github.io/material-ui-enhanced-fields/ [Downshift]: https://github.com/paypal/downshift [Downshift-RenderPropFunction]: https://github.com/paypal/downshift#render-prop-function [material-ui]: https://github.com/mui-org/material-ui --- _Source: https://npm.io/package/material-ui-enhanced-fields · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._