Nighttime Pachinko Marathon


    2.0.0 • Public • Published


    A collection of enhanced fields for use with material-ui (v1 beta).


    See storybook for live demos.


    yarn add material-ui-enhanced-fields@next
    npm i material-ui-enhanced-fields@next



    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 <input/> 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 library.

    Basic Examples

    const DATA = ['apples', 'oranges'];
      TextFieldProps={{ floatingLabelText: 'Pick a food' }}
    const DATA = [{text: 'apple', type: 'fruit'}, {text: 'tomato', type: 'veg'}];
      itemToString={item => item === null ? '' : item.text}
      TextFieldProps={{ floatingLabelText: 'Pick a food' }}


    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.
    renderSelectedItem function({deselect: function, hasFocus: boolean, item: any, itemToString: function}) Override the default rendering (uses Chips) 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.


    npm i material-ui-enhanced-fields

    DownloadsWeekly Downloads






    Unpacked Size

    24.2 kB

    Total Files


    Last publish


    • jf248