Top
ComboBox API - API
ComboBox API
Props (86)
Callback Props (13)
Styling Props (32)
Methods (17)
Bool
default: true
Whether to make first list item active, when filtering. This is useful because when a filter is done and the first item is the one searched, pressing Enter will select it.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      activeFirstItemOnFilter: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.activeFirstItemOnFilter}
          onChange={(activeFirstItemOnFilter) => {
            this.setState({
              activeFirstItemOnFilter
            })
          }}
        >
          Active first item on filter
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        activeFirstItemOnFilter={this.state.activeFirstItemOnFilter}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Number|String
default: undefined
Specifies which item is active while navigating inside dropdown list. It represents the id (idProperty) of the active item.
To react to active item change, see onActiveItemChange.
For uncontrolled behaviour, see defaultActiveItem.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: null
    }
  }
  render() {
    return <ComboBox
      style={{width: 300}}
      dataSource={countries}
      activeItem={this.state.activeItem}
      onActiveItemChange={(activeItem) => this.setState({ activeItem })}
    />
  }
}

export default () => <App />
Number|String
default: undefined
Specifies which item is active while navigating tags. It represents the id (idProperty) of the active tag.
To react to active tag change,, see onActiveTagChange.
For uncontrolled behaviour, see defaultActiveTag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeTag: null
    }
  }
  render() {
    return <ComboBox
      style={{width: 300}}
      multiple
      defaultValue={['RO', 'IT', 'CO', 'FR']}
      dataSource={countries}
      activeTag={this.state.activeTag}
      onActiveTagChange={(activeTag) => this.setState({ activeTag })}
    />
  }
}

export default () => <App />
Bool
default: false
Whether to allow adding values that don't exist in the dataSource.
To create a new tag, enter text that doesn't match any item in dataSource and press Enter.
When no items match text a text is rendered inside dropdown list, it can be customized with newCustomTagText.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      allowCustomTagCreation: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.allowCustomTagCreation}
          onChange={(allowCustomTagCreation) => {
            this.setState({
              allowCustomTagCreation
            })
          }}
        >
          Allow custom tag creation
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        allowCustomTagCreation={this.state.allowCustomTagCreation}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to deselect an item when clicked.
This prop is available only for single select (multiple=false).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      allowSelectionToggle: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.allowSelectionToggle}
          onChange={(allowSelectionToggle) => {
            this.setState({
              allowSelectionToggle
            })
          }}
        >
          Allow selection toggle
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        allowSelectionToggle={this.state.allowSelectionToggle}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to lose focus when something is selected, this is useful on mobile, it drops the keyboard.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoBlur: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoBlur}
          onChange={(autoBlur) => {
            this.setState({
              autoBlur
            })
          }}
        >
          Auto blur
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        autoBlur={this.state.autoBlur}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to enable autocomplete. Autocomplete begins when text length is greater than minAutocompleteLength.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autocomplete: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autocomplete}
          onChange={(autocomplete) => {
            this.setState({
              autocomplete
            })
          }}
        >
          Autocomplete
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        autocomplete={this.state.autocomplete}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
number
default: 300
Restricts the frequency of autocomplete while typing to this time interval.
For this prop to have effect, autocomplete must be true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autocompleteDelay: 300
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Autocomplete delay:{' '}
        <NumericInput
          style={{width: 90}}
          value={this.state.autocompleteDelay}
          onChange={(autocompleteDelay) => this.setState({autocompleteDelay})}
        />
      </div>
      <ComboBox
        style={{width: 300}}
        autocomplete
        autocompleteDelay={this.state.autocompleteDelay}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Receives focus when it is rendered.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

const focusedStyle = {
  fontWeight: 'bold',
  color: 'green'
}

const blurredStyle = {
  fontWeight: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoFocus: true,
      focused: null
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoFocus}
          onChange={(autoFocus) => {
            this.setState({
              autoFocus
            })
          }}
        >
          Auto focus
        </CheckBox>
      </div>
      <p>
        The component is {
          this.state.focused ?
          <span style={focusedStyle}>focused</span> :
          <span style={blurredStyle}>blurred</span>
        }.
      </p>
      <ComboBox
        style={{width: 300}}
        autoFocus={this.state.autoFocus}
        dataSource={countries}
        onFocus={focused => this.setState({ focused: true })}
        onBlur={focused => this.setState({ focused: false })}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
If true, value changes when items are navigated with keyboard.
This prop is available only for single select (multiple=false).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      changeValueOnNavigation: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.changeValueOnNavigation}
          onChange={(changeValueOnNavigation) => {
            this.setState({
              changeValueOnNavigation
            })
          }}
        >
          Change value on navigation
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple={false}
        changeValueOnNavigation={this.state.changeValueOnNavigation}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn({domProps, onClear})
default: undefined
Customize clear icon.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

function clearIcon({ onClear, domProps }) {
  return <Button {...domProps} style={{ background: 'none', padding: 0, border: 'none', stroke: 'none' }}>
    <svg fill="#ff0000" height="14" viewBox="2 0 21 21" width="14">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </Button>
}

export default () => <ComboBox
  multiple
  style={{ width: 300 }}
  enableNavigation={true}
  defaultValue={['CO']}
  dataSource={countries}
  clearIcon={clearIcon}
/>
Bool
default: true
Whether to clear search text when <ComboBox /> loses focus.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      clearTextOnBlur: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.clearTextOnBlur}
          onChange={(clearTextOnBlur) => {
            this.setState({
              clearTextOnBlur
            })
          }}
        >
          Clear text on blur
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        clearTextOnBlur={this.state.clearTextOnBlur}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to clear text when a value changes .
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      clearTextOnSelect: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.clearTextOnSelect}
          onChange={(clearTextOnSelect) => {
            this.setState({
              clearTextOnSelect
            })
          }}
        >
          Clear text on select
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        clearTextOnSelect={this.state.clearTextOnSelect}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to clear value when text is completely erased.
This prop is available only for single select (multiple=false).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      clearValueOnEmpty: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.clearValueOnEmpty}
          onChange={(clearValueOnEmpty) => {
            this.setState({
              clearValueOnEmpty
            })
          }}
        >
          Clear value on empty
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        clearValueOnEmpty={this.state.clearValueOnEmpty}
        dataSource={countries}
        defaultValue="DE"
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Collapse dropdown list when <ComboBox /> receives blur.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapseOnBlur: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.collapseOnBlur}
          onChange={(collapseOnBlur) => {
            this.setState({
              collapseOnBlur
            })
          }}
        >
          Collapse on blur
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        collapseOnBlur={this.state.collapseOnBlur}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Collapse list when escape key is pressed.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapseOnEscape: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.collapseOnEscape}
          onChange={(collapseOnEscape) => {
            this.setState({
              collapseOnEscape
            })
          }}
        >
          Collapse on escape
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        collapseOnEscape={this.state.collapseOnEscape}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Collapse dropdown list when an item is selected.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapseOnSelect: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.collapseOnSelect}
          onChange={(collapseOnSelect) => {
            this.setState({
              collapseOnSelect
            })
          }}
        >
          Collapse on select
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        collapseOnSelect={this.state.collapseOnSelect}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
An item can be selected via keyboard navigation. To select an item, navigate with arrow down/up and press Enter key. If a selection was made in this way and collapseOnSelectWithEnter=true, then the dropdown list is collapsed.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapseOnSelectWithEnter: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.collapseOnSelectWithEnter}
          onChange={(collapseOnSelectWithEnter) => {
            this.setState({
              collapseOnSelectWithEnter
            })
          }}
        >
          Collapse on select with enter
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        collapseOnSelectWithEnter={this.state.collapseOnSelectWithEnter}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
String|HTMLElement|Fn(node)
default: undefined
Specifies the constrain region for the combo list overlay.
The constrainTo can be a String CSS selector, an HTMLElement or a Function that is called with the DOM node of the <ComboBox /> as the first argument. If it is a Function, it needs to return an HTMLElement.
When a String CSS selector is specified, the list is constrained to the first matching parent.
The <ComboBox /> list is smartly positioned to the top or to the bottom depending on the constrain region and the available space.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      value: null
    }
  }

  render() {
    const selectedValue = this.state.value ?
      <p>You selected: {this.state.value}</p> :
      <p>No country has been selected.</p>

    return <div style={{ padding: 10, paddingTop: 100, border: '1px dotted red'}}>
      <p>Select a country:</p>
      <ComboBox
        style={{width: 300}}
        collapseOnSelect
        onChange={(value) => this.setState({
          value
        })}
        constrainTo={(domNode) => domNode.parentNode}
        dataSource={countries}
      />

      {selectedValue}
    </div>
  }
}

export default () => <App />
Object[]|Fn({ skip, limit, text, action, hasNextPage })|Promise: Object[]
default: undefined
Data used to render items. For asynchronous data, use a Promise or a function returning a Promise.
When asynchronous, a loading spinner will be rendered inside <ComboBox /> body and loading text will be rendered inside dropdown list.
dataSource can be a function and it can have the following arguments:
  • skip: Number - initial pagination skip.
  • limit: Number - pagination limit.
  • text: String - the text inside the <ComboBox /> input - used for filtering.
  • action: String - either "filter" or "expand".
  • hasNextPage: Bool - a flag used when enablePagination is set to true and which it tells if there are pages to load or not.
Or it can be an array, with objects in the array having the following shape:
  • label: React.node - rendered inside the tag/list item, by default it is label, but it can be changed with displayProperty.
  • id: String|Number - value of the item, the attribute name can be customized with idProperty.
  • group: String - name of the group, used for grouping, see groupProperty.
Besides a plain array, the <ComboBox /> supports async dataSource which can be specified as a Promise or a function returning a Promise. Again, the rules of immutability apply, so make sure you pass a reference to the same promise/function when you want to render the same-exact dataSource.
The promise (as specified by dataSource or as retuned by the dataSource function) should be resolved with two possible value types:
  • an array - to be used as the data for the grid
  • an object with the data: Array and count: Number properties - this is generally useful when using remote data with pagination and the count represents the total number of records on the server (only a part of those are sent to the client via pagination).
Besides returning a Promise, dataSource as a function can also return an array, for syncronous dataSource that you want to have full control over (this function is being called with an object argument that containsskip and limit, besides a number of useful properties. ).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

const dataSourceWithGroups = [
  { id: 1, label: 'red', group: 'color' },
  { id: 2, label: 'blue', group: 'color' },
  { id: 3, label: 'green', group: 'color' },
  { id: 4, label: 'yellow', group: 'color' },
  { id: 5, label: 'circle', group: 'shape' },
  { id: 6, label: 'line', group: 'shape' },
  { id: 7, label: 'triangle', group: 'shape' }
].map((items) => {
  return {
    id: items.id,
    label: items.label,
    group: items.group
  }
})

function renderItem({domProps, item, data, index}) {
  if (index >= 0 && index <= 3) {
    return <div {...domProps}>
      <div
        style={{
          display: 'inline-block',
          borderRadius: '50%',
          width: 10,
          height: 10,
          background: item.label
        }}
      /> {domProps.children}
    </div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      dataSource: []
    }
  }

  loadData() {
    const dataSource = config => {
      const { data, skip, limit } = config;

      return new Promise((resolve) => {
        return setTimeout(() => {
          resolve({
            data: countries.slice(skip, skip + limit),
            count: countries.length
          })
        }, 1000)
      })
    }

    this.setState({
      dataSource
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <code>dataSource as a function (async)</code>
        <div style={{ marginBottom: 20 }}>
          <Button onClick={() => this.loadData()}>
            Load data source
          </Button>
        </div>
        <ComboBox
          style={{width: 300}}
          dataSource={this.state.dataSource}
          enablePagination
          skip={0}
          limit={20}
        />
      </div>
      <div style={{ marginBottom: 20 }}>
      <code>dataSource = array</code>
        <ComboBox
          style={{width: 300}}
          dataSource={countries}
        />
      </div>
      <div style={{ marginBottom: 20 }}>
        Example with grouping:
        <ComboBox
          dataSource={dataSourceWithGroups}
          renderItem={renderItem}
        />
      </div>
    </div>
  }
}

export default () => <App />
Number|String
default: undefined
Specifies initial active item while navigating inside dropdown list.
For controlled behaviour, see activeItem.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  multiple
  defaultActiveItem={'AL'}
  dataSource={countries}
/>
Number|String
default: undefined
Specifies initial active tag while navigating tags. It represents the id (idProperty) of the active tag.
To react to active tag change, see onActiveTagChange.
For controlled behaviour, see activeTag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  multiple
  defaultActiveTag={'IT'}
  defaultValue={['RO', 'IT', 'CO', 'FR']}
  dataSource={countries}
/>
Bool
default: false
Whether the dropdown list is initially expanded.
For controlled behaviour, see expanded.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    defaultExpanded
    dataSource={countries}
  />
Bool
default: undefined
Whether the <ComboBox /> is loading, this props sets it's initial value.
When in loading state a spinner is rendered in <ComboBox /> body and a loading text is rendered inside dropdown list.
For controlled behaviour, see loading.
Loading changes when dataSource is asynchronous or a new dataSource is loaded by loadAsyncDataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    defaultLoading
    dataSource={
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(countries)
        }, 1500
      )})
    }
  />
String
default: undefined
Controls the initial text inside search input.
For controlled behaviour, see text.
Search input is rendered only when <ComboBox /> has focus.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    multiple
    dataSource={countries}
    defaultText="Canada"
  />
String|String[]|Number|Number[]|Object|Object[]
default: undefined
Specifies the initial value of the <ComboBox />. When multiple=true it is an array of values.
It identifies the selected items, by default by the id property on the items inside dataSource. The identifier can be changed with idProperty.
For controlled behaviour, see value.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    multiple
    defaultValue={['DO', 'CM']}
  />
Bool
default: false
Whether the <ComboBox /> is disabled.
When disabled value cannot be changed and it cannot be expanded.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      disabled: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.disabled}
          onChange={(disabled) => {
            this.setState({
              disabled
            })
          }}
        >
          Disabled
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        disabled={this.state.disabled}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
String
default: "label"
Property on dataSource items used to render items/tags.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

const dataSource = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' },
  { id: 4, color: 'yellow' },
].map((items) => {
  return {
    id: items.id,
    color: items.color
  }
})

function renderItem({domProps, item, data, index}) {
  if (index >= 0) {
    return <div {...domProps}>
      <div
        style={{
          display: 'inline-block',
          borderRadius: '50%',
          width: 10,
          height: 10,
          background: item.color
        }}
      /> {domProps.children}
    </div>
  }
}

export default () => <div>
  <div style={{ marginBottom: 20 }}>
    <strong>In this example 'color' key is used as display property.</strong>
  </div>
  <ComboBox
    style={{width: 300}}
    multiple
    dataSource={dataSource}
    displayProperty="color"
    defaultValue={[1, 3]}
    renderItem={renderItem}
  />
</div>
Bool
default: true
Specifies whether keyboard navigation is enabled on the <ComboBox /> list.
If true, items in dropdown list can be navigated with arrow up/down.
List navigation is controlled with activeItem prop.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enableNavigation: true,
      enableTagNavigation: true,
      enableListNavigation: true
    }

    this.toggleNavigation = this.toggleNavigation.bind(this)
    this.toggleTagNavigation = this.toggleTagNavigation.bind(this)
    this.toggleListNavigation = this.toggleListNavigation.bind(this)
  }

  toggleNavigation(enableNavigation) {
    this.setState({
      enableNavigation
    })

    if (!enableNavigation && this.state.enableTagNavigation) {
      this.setState({
        enableTagNavigation: false,
        enableListNavigation: false
      })
    }
  }

  toggleTagNavigation(enableTagNavigation) {
    this.setState({
      enableTagNavigation
    })
  }
  toggleListNavigation(enableListNavigation) {
    this.setState({
      enableListNavigation
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableNavigation}
          onChange={this.toggleNavigation}
        >
          Enable navigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          disabled={!this.state.enableNavigation}
          checked={this.state.enableTagNavigation}
          onChange={this.toggleTagNavigation}
        >
          Enable tag navigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          disabled={!this.state.enableNavigation}
          checked={this.state.enableListNavigation}
          onChange={this.toggleListNavigation}
        >
          Enable list navigation
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        enableListNavigation={this.state.enableListNavigation}
        enableTagNavigation={this.state.enableTagNavigation}
        enableNavigation={this.state.enableNavigation}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Specifies whether keyboard navigation is enabled.
The <ComboBox /> is built to be keyboard friendly.
Keyboard navigation is enabled by default, via the enableNavigation prop.
Tags (when multiple=true) and list items can be navigated with arrow keys.
You can specify a tabIndex, just like for a regular <input /> (or HTMLElement) in order to modify the tab-navigation order for the <ComboBox />.
Here's a list of possible keyboard actions:
  • Arrow up/down opens list if it is not expanded.
  • Arrow up/down navigate items when list is expanded.
  • Enter selects the activeItem.
  • Escape collapses the dropdown list, when it is expanded and defocuses the activeTag, if the dropdown list is collapsed.
  • Backspace deletes the activeTag. If there is a tag to the left, it will become active. Otherwise, the tag to the right will be made active (if any). When keepTagTextOnRemove=true, the tag is removed, but the label becomes a text which you can further edit.
  • Delete deletes the activeTag. If there is a tag to the right, it will become active. Otherwise, the tag to the left will be made active (if any).
  • Typing in a searchable <ComboBox /> when it is collapsed, will expand it.
  • When an activeItem is selected by pressing Enter, the next item will become active, if navigateToNextAfterSelection=true.
  • Arrow up/down navigation will set the new activeItem, by jumping over disabled items.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enableNavigation: true,
      enableTagNavigation: true,
      enableListNavigation: true
    }

    this.toggleNavigation = this.toggleNavigation.bind(this)
    this.toggleTagNavigation = this.toggleTagNavigation.bind(this)
    this.toggleListNavigation = this.toggleListNavigation.bind(this)
  }

  toggleNavigation(enableNavigation) {
    this.setState({
      enableNavigation
    })

    if (!enableNavigation && this.state.enableTagNavigation) {
      this.setState({
        enableTagNavigation: false,
        enableListNavigation: false
      })
    }
  }

  toggleTagNavigation(enableTagNavigation) {
    this.setState({
      enableTagNavigation
    })
  }
  toggleListNavigation(enableListNavigation) {
    this.setState({
      enableListNavigation
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableNavigation}
          onChange={this.toggleNavigation}
        >
          Enable navigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          disabled={!this.state.enableNavigation}
          checked={this.state.enableTagNavigation}
          onChange={this.toggleTagNavigation}
        >
          Enable tag navigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          disabled={!this.state.enableNavigation}
          checked={this.state.enableListNavigation}
          onChange={this.toggleListNavigation}
        >
          Enable list navigation
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        enableListNavigation={this.state.enableListNavigation}
        enableTagNavigation={this.state.enableTagNavigation}
        enableNavigation={this.state.enableNavigation}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Keyboard navigation on tags can be disabled via enableTagNavigation.
Bool
default: undefined
Specifies whether pagination is enabled.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enablePagination: true,
      dataSource: []
    }
  }

  loadDataSource() {
    const dataSource = config => {
      const { skip, limit, data } = config;

      return new Promise((resolve) => {
        resolve({
          data: countries.slice(skip, skip + limit),
          count: countries.length
        })
      })
    }

    this.setState({
      dataSource
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enablePagination}
          onChange={(enablePagination) => {
            this.setState({
              enablePagination
            })
          }}
        >
          enablePagination
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.loadDataSource()}>
          Load data source
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        enablePagination={this.state.enablePagination}
        dataSource={this.state.dataSource}
        skip={0}
        limit={20}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Specifies whether keyboard navigation is enabled on tags.
Keyboard navigation on tags is enabled by default, via the enableTagNavigation prop.
Tags (when multiple=true) and list items can be navigated with arrow keys.
You can specify a tabIndex, just like for a regular <input /> (or HTMLElement) in order to modify the tab-navigation order for the <ComboBox />.
Here's a list of possible keyboard actions:
  • Arrow up/down opens list if it is not expanded.
  • Arrow up/down navigate items when list is expanded.
  • Enter selects the activeItem.
  • Escape collapses the dropdown list, when it is expanded and defocuses the activeTag, if the dropdown list is collapsed.
  • Backspace deletes the activeTag. If there is a tag to the left, it will become active. Otherwise, the tag to the right will be made active (if any). When keepTagTextOnRemove=true, the tag is removed, but the label becomes a text which you can further edit.
  • Delete deletes the activeTag. If there is a tag to the right, it will become active. Otherwise, the tag to the left will be made active (if any).
  • Typing in a searchable <ComboBox /> when it is collapsed, will expand it.
  • When an activeItem is selected by pressing Enter, the next item will become active, if navigateToNextAfterSelection=true.
  • Arrow up/down navigation will set the new activeItem, by jumping over disabled items.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enableNavigation: true,
      enableTagNavigation: true,
      enableListNavigation: true
    }

    this.toggleNavigation = this.toggleNavigation.bind(this)
    this.toggleTagNavigation = this.toggleTagNavigation.bind(this)
    this.toggleListNavigation = this.toggleListNavigation.bind(this)
  }

  toggleNavigation(enableNavigation) {
    this.setState({
      enableNavigation
    })

    if (!enableNavigation && this.state.enableTagNavigation) {
      this.setState({
        enableTagNavigation: false,
        enableListNavigation: false
      })
    }
  }

  toggleTagNavigation(enableTagNavigation) {
    this.setState({
      enableTagNavigation
    })
  }
  toggleListNavigation(enableListNavigation) {
    this.setState({
      enableListNavigation
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableNavigation}
          onChange={this.toggleNavigation}
        >
          Enable navigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          disabled={!this.state.enableNavigation}
          checked={this.state.enableTagNavigation}
          onChange={this.toggleTagNavigation}
        >
          Enable tag navigation
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          disabled={!this.state.enableNavigation}
          checked={this.state.enableListNavigation}
          onChange={this.toggleListNavigation}
        >
          Enable list navigation
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        enableListNavigation={this.state.enableListNavigation}
        enableTagNavigation={this.state.enableTagNavigation}
        enableNavigation={this.state.enableNavigation}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether the dropdown list is expanded. To react to expand change see onExpandedChange.
For uncontrolled behaviour, see defaultExpanded.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expanded: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.expanded}
          onChange={(expanded) => {
            this.setState({
              expanded
            })
          }}
        >
          Expanded
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        dataSource={countries}
        expanded={this.state.expanded}
        onExpandedChange={(expanded) => this.setState({ expanded })}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Expand list when <ComboBox /> is clicked.
For this prop to have effect, expandOnFocus and toggleExpandOnClick must be false . Because both these props influence whether to expand.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expandOnClick: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.expandOnClick}
          onChange={(expandOnClick) => {
            this.setState({
              expandOnClick
            })
          }}
        >
          Expand on click
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        dataSource={countries}
        expandOnFocus={false}
        toggleExpandOnClick={false}
        expandOnClick={this.state.expandOnClick}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Expand dropdown list when <ComboBox /> receives focus.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expandOnFocus: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.expandOnFocus}
          onChange={(expandOnFocus) => {
            this.setState({
              expandOnFocus
            })
          }}
        >
          Expand on focus
        </CheckBox>
      </div>
      <div>
        <strong>Click the input and navigate with Tab key to check this <code>behaviour</code>.</strong><br />
        <input style={{margin: '10px 0'}} />
      </div>
      <ComboBox
        style={{width: 300}}
        expandOnFocus={this.state.expandOnFocus}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to expand dropdown list when text is changed by a key press.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expandOnTextChange: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.expandOnTextChange}
          onChange={(expandOnTextChange) => {
            this.setState({
              expandOnTextChange
            })
          }}
        >
          Expand on text change
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        expandOnFocus={false}
        expandOnClick={false}
        expandOnTextChange={this.state.expandOnTextChange}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Number
default: 300
Restricts the frequency of dataSource filtering while typing to this time interval.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      filterDelay: 300
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Filter delay:{' '}
        <NumericInput
          style={{width: 90}}
          value={this.state.filterDelay}
          onChange={(filterDelay) => this.setState({filterDelay})}
        />
      </div>
      <ComboBox
        style={{width: 300}}
        filterDelay={this.state.filterDelay}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Fn({item: Object, text:String, index:Number, mode:'contains'|'startsWith' }): Bool
default: undefined
Filter function used to filter dataSource when text changes.
This function takes the following params:
Filtering starts only after text has length greater than filterMinLength.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function filterFunction({item, text, index, mode }) {
  return item.label === text
}

export default () => <div>
  <p>
    In this example filterFunction returns true only when text matches exactly the item label.
  </p>
  <ComboBox
      style={{width: 300}}
      dataSource={countries}
      filterFunction={filterFunction}
    />
</div>
Number
default: 3
Minimum text length before dataSource filtering starts.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      filterMinLength: 3
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Filter minimum length:{' '}
        <NumericInput
          style={{width: 70}}
          minValue={1}
          maxValue={10}
          value={this.state.filterMinLength}
          onChange={(filterMinLength) => this.setState({filterMinLength})}
        />
      </div>
      <ComboBox
        style={{width: 300}}
        filterMinLength={this.state.filterMinLength}
        dataSource={countries}
        filterMode="startsWith"
      />
    </div>
  }
}

export default () => <App />
startsWith|contains
default: "contains"
Filter strategy to check whether item (dataSource[n]) contains or starts with text.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      filter: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <p><code>Current filter mode is <b>{this.state.filter ? 'startsWith' : 'contains'}</b>.</code></p>
        <CheckBox
          checked={this.state.filter}
          onChange={(filter) => this.setState({ filter })}
        >
          Change filter mode
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        filterMode={this.state.filter ? 'startsWith' : 'contains'}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
String
default: "displayProperty"
Property on dataSource items used for filtering.
For highlightMatchedText to work, this property should have the same value as displayProperty.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { id: 1, label: 'red', filter: 'fist' },
  { id: 2, label: 'blue', filter: 'second' },
  { id: 3, label: 'green', filter: 'third' },
  { id: 4, label: 'yellow', filter: 'forth' },
]

export default () => <ComboBox
  dataSource={dataSource}
  filterProperty="filter"
/>
Bool
default: false
Whether to focus search input when combo is clicked.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

const focusedStyle = {
  fontWeight: 'bold',
  color: 'green'
}

const blurredStyle = {
  fontWeight: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      focusOnClick: true,
      focused: null
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.focusOnClick}
          onChange={(focusOnClick) => {
            this.setState({
              focusOnClick
            })
          }}
        >
          Focus on click
        </CheckBox>
      </div>
      <p>
        The component is {
          this.state.focused ?
          <span style={focusedStyle}>focused</span> :
          <span style={blurredStyle}>blurred</span>
        }.
      </p>
      <ComboBox
        style={{width: 300}}
        focusOnClick={this.state.focusOnClick}
        dataSource={countries}
        onFocus={focused => this.setState({ focused: true })}
        onBlur={focused => this.setState({ focused: false })}
      />
    </div>
  }
}

export default () => <App />
group
default: undefined
The name of the attribute on the dataSource item that indicates the name of the group. The group name is rendered before the fist item of every group.
To customize group name render see renderGroup.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSourceWithGroups = [
  { id: 1, label: 'red', type: 'color' },
  { id: 2, label: 'blue', type: 'color' },
  { id: 3, label: 'green', type: 'color' },
  { id: 4, label: 'yellow', type: 'color' },
  { id: 5, label: 'circle', type: 'shape' },
  { id: 6, label: 'line', type: 'shape' },
  { id: 7, label: 'triangle', type: 'shape' },
].map((items) => {
  return {
    id: items.id,
    label: items.label,
    type: items.type
  }
})

function renderItem({domProps, item, data, index}) {
  if (index >= 0 && index <= 3) {
    return <div {...domProps}>
      <div
        style={{
          display: 'inline-block',
          borderRadius: '50%',
          width: 10,
          height: 10,
          background: item.label
        }}
      /> {domProps.children}
    </div>
  }
}

export default () => <ComboBox
  style={{width: 300}}
  groupProperty="type"
  dataSource={dataSourceWithGroups}
  renderItem={renderItem}
/>
Bool
default: false
Whether to make first item active when dropdown opens.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      highlightFirst: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.highlightFirst}
          onChange={(highlightFirst) => {
            this.setState({
              highlightFirst
            })
          }}
        >
          Highlight first
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        highlightFirst={this.state.highlightFirst}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to highlight the found text.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      highlightMatchedText: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.highlightMatchedText}
          onChange={(highlightMatchedText) => {
            this.setState({
              highlightMatchedText
            })
          }}
        >
          Highlight matched text
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        highlightMatchedText={this.state.highlightMatchedText}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
String|Fn(item): String
default: "id"
Property by which items are identified inside dataSource. <ComboBox /> value identifies selected items by this ids.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { code: 1, label: 'red' },
  { code: 2, label: 'blue' },
  { code: 3, label: 'green' },
  { code: 4, label: 'yellow' },
]

export default () => <div>
  <p><strong>In this example items are identified by 'code' property, value will hold this values.</strong></p>
  <ComboBox
    style={{width: 300}}
    multiple
    dataSource={dataSource}
    idProperty="code"
    defaultValue={[1, 3]}
  />
</div>
Bool
default: false
Whether the component should have display `flex` or `inline-flex`.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      inlineFlex: false
    }
  }

  render() {
    return <div style={{ marginBottom: 20 }}>
      <CheckBox
        checked={this.state.inlineFlex}
        onChange={(inlineFlex) => {
          this.setState({
            inlineFlex
          })
        }}
      >
        Inline flex
      </CheckBox>
      {' '}
      <ComboBox
        style={{width: 300}}
        inlineFlex={this.state.inlineFlex}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Forces the item text on one line, and display an ellipsis if needed.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      itemEllipsis: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.itemEllipsis}
          onChange={(itemEllipsis) => {
            this.setState({
              itemEllipsis
            })
          }}
        >
          Item ellipsis
        </CheckBox>
      </div>
      <ComboBox
        itemEllipsis={this.state.itemEllipsis}
        dataSource={countries}
        style={{ width: 100 }}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
When tag is removed with backspace and keepTagTextOnRemove=true tag's text will fill the text input.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      keepTagTextOnRemove: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.keepTagTextOnRemove}
          onChange={(keepTagTextOnRemove) => {
            this.setState({
              keepTagTextOnRemove
            })
          }}
        >
          Keep tag text on remove
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        keepTagTextOnRemove={this.state.keepTagTextOnRemove}
        dataSource={countries}
        multiple
        defaultValue={['UK', 'DE', 'USA']}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
If lazyDataSource is true, the dataSource is called only when filtering/expanding the <ComboBox /> and not when the component is mounted. If lazyDataSource is set to false, the dataSource will be called as soon as the component is rendered/mounted.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      comboValue: null
    }
  }

  renderLazyCombo() {
    const dataSource = config => {
      const { data } = config;

      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: countries,
            count: countries.length
          });
        }, 1000);
      });
    };

    return (
      <ComboBox
        style={{width: 300}}
        collapseOnSelect
        lazyDataSource
        dataSource={dataSource}
        value={this.state.comboValue}
        onChange={value => {
          this.setState({
            comboValue: value
          });
        }}
        displayProperty="label"
      />
    );
  }

  render() {
    return <div>
      Data source will be called only when you interact with the component (expand the combo).
      {this.renderLazyCombo()}
    </div>
  }
}

export default () => <App />
number
default: 20
Specifies the pagination limit.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      limit: 20,
      dataSource: []
    }
  }

  loadDataSource() {
    const dataSource = config => {
      const { skip, limit, data } = config;

      return new Promise((resolve) => {
        resolve({
          data: countries.slice(skip, skip + limit),
          count: countries.length
        })
      })
    }

    this.setState({
      dataSource
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Limit:{' '}
        <NumericInput
          style={{width: 70}}
          value={this.state.limit}
          onChange={(limit) => this.setState({limit})}
        />
      </div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.loadDataSource()}>
          Load data source
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        limit={this.state.limit}
        dataSource={this.state.dataSource}
        enablePagination
      />
    </div>
  }
}

export default () => <App />
React.Node
default: undefined
Rendered inside dropdown list when dataSource is null or undefined.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

export default () => <ComboBox
    style={{width: 300}}
    multiple
    listEmptyText={
      <strong style={{ color: 'red '}}>
        no data
      </strong>
    }
    enableNavigation={true}
    dataSource={[]}
  />
React.Node
default: "Loading data…"
Text rendered inside dropdown list when loading=true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  loading
  listLoadingText={
    <h2 style={{ color:'red' }}>custom loading text</h2>
  }
/>
Bool
default: undefined
Whether the <ComboBox /> is loading.
When in loading state, a spinner is rendered in <ComboBox /> body and a loading text is rendered inside dropdown list.
This prop can be used with onLoadingChange to control and react to loading change.
For uncontrolled behaviour, see defaultLoading.
Loading changes when dataSource is asynchronous or a new dataSource is loaded by loadAsyncDataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true
    }

    this.asyncCountries = new Promise((resolve) => {
      setTimeout(() => {
        resolve(countries)
      }, 2000)
    })
  }

  render() {
    return <ComboBox
      style={{width: 300}}
      dataSource={this.asyncCountries}
      loading={this.state.loading}
      onLoadingChange={(loading) => {
        this.setState({ loading })
      }}
    />
  }
}

export default () => <App />
React.Node
default: undefined
Spinner rendered inside <ComboBox /> body when loading=true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isToggleOn: false
    }
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }))
  }

  render() {
    return <div>
    <div style={{ marginBottom: 20 }}>
      <Button onClick={() => this.handleClick()}>
        Toggle loader spinner
      </Button>
    </div>
    <div style={{marginTop: 20}}>
    <code>{this.state.isToggleOn ? 'Custom' : 'Default'} loading spinner</code>
      <ComboBox
        style={{width: 300}}
        loadingSpinner={this.state.isToggleOn ? <div className="loader" /> : true}
        loading
        dataSource={countries}
      />
    </div>
  </div>
  }
}


export default () => <App />
Number
default: undefined
Maximum number of tags. The next tag after the maximum will have all remaining values concatenated, e.g (apple)(banana)(and other 3…).
To control the render of the last tag use renderTag prop.
Available in case of multiple=true
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      maxTagsLength: 2
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Max tags length:{' '}
        <NumericInput
          style={{width: 70}}
          minValue={0}
          maxValue={10}
          value={this.state.maxTagsLength}
          onChange={(maxTagsLength) => this.setState({maxTagsLength})}
        />
      </div>
      <ComboBox
        style={{width: 300}}
        maxTagsLength={this.state.maxTagsLength}
        dataSource={countries}
        multiple
        defaultValue={[
          "AX",
          "DZ",
          "RO",
          "AO",
          "DE"
        ]}
      />
    </div>
  }
}

export default () => <App />
number
default: undefined
Limit the number of possible selected items, applied when multiple=true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      maxValueLength: 2
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Max tags length:{' '}
        <NumericInput
          style={{width: 70}}
          minValue={0}
          maxValue={10}
          value={this.state.maxValueLength}
          onChange={(maxValueLength) => this.setState({maxValueLength})}
        />
      </div>
      <ComboBox
        style={{width: 300}}
        maxValueLength={this.state.maxValueLength}
        dataSource={countries}
        multiple
      />
    </div>
  }
}

export default () => <App />
Number
default: 3
Minimum text length before autocomplete starts.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      minAutocompleteLength: 3
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Max tags length:{' '}
        <NumericInput
          style={{width: 70}}
          minValue={0}
          maxValue={10}
          value={this.state.minAutocompleteLength}
          onChange={(minAutocompleteLength) => this.setState({minAutocompleteLength})}
        />
      </div>
      <ComboBox
        style={{width: 300}}
        minAutocompleteLength={this.state.minAutocompleteLength}
        dataSource={countries}
        autocomplete
        filterMode="startsWith"
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether multiple items can be selected.
When true each selected item will be rendered inside a tag.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      multiple: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.multiple}
          onChange={(multiple) => {
            this.setState({
              multiple
            })
          }}
        >
          Multiple
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple={this.state.multiple}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Whether to navigate to next item in the list when one is selected by keyboard navigation.
To select an item with keyboard, click the <ComboBox />, navigate to an item with Arrow up/down and press Enter.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      navigateToNextAfterSelection: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.navigateToNextAfterSelection}
          onChange={(navigateToNextAfterSelection) => {
            this.setState({
              navigateToNextAfterSelection
            })
          }}
        >
          Navigate to next after selection
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        navigateToNextAfterSelection={this.state.navigateToNextAfterSelection}
        dataSource={countries}
        multiple
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn({ text }): React.Node
default: undefined
Text shown in list when the entered text doesn't match any item in dataSource.
To enable new custom tag creation allowCustomTagCreation must be true.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    multiple
    allowCustomTagCreation
    newCustomTagText={
      ({ text }) => <strong>
        create new tag: {text}
      </strong>
    }
    dataSource={countries}
  />
React.Node
default: undefined
Rendered inside text input when text is empty.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  multiple
  enableNavigation={true}
  dataSource={countries}
  placeholder={<i style={{ color: 'red '}}>Enter Country</i>}
/>
Bool
default: false
Whether to filter locally or remote on a server. If remoteFilter is set to true and the dataSource is a function, will be called when user is filtering the <ComboBox /> items.
If remoteFilter is set to true, dataSource must be a function returning a Promise.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

import countries from './countries'

class App extends React.Component {

  renderCombo() {
    const dataSource = config => {
      const { data, text } = config;

      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: countries.filter(c => c.label.indexOf(text) >= 0),
            count: countries.length
          });
        }, 1000);
      });
    };

    return (
      <ComboBox
        style={{width: 300}}
        collapseOnSelect
        remoteFilter
        searchable
        dataSource={dataSource}
        displayProperty="label"
      />
    );
  }

  render() {
    return <div>
      Choose a country:
      {this.renderCombo()}
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to remove selected items from dropdown list.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      removeSelectedItems: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.removeSelectedItems}
          onChange={(removeSelectedItems) => {
            this.setState({
              removeSelectedItems
            })
          }}
        >
          Remove selected items
        </CheckBox>
      </div>
      <p>
        Type-in a country from the list, then selected and then check if the country is still in the list.
      </p>
      <ComboBox
        style={{width: 300}}
        multiple
        removeSelectedItems={this.state.removeSelectedItems}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether to remove the tag with backspace.
For this prop to have effect multiple must be true
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      removeTagOnBackspace: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.removeTagOnBackspace}
          onChange={(removeTagOnBackspace) => {
            this.setState({
              removeTagOnBackspace
            })
          }}
        >
          Remove tag on backspace
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        removeTagOnBackspace={this.state.removeTagOnBackspace}
        dataSource={countries}
        multiple
        defaultValue={['RO', 'DO', 'IT', 'USA']}
      />
    </div>
  }
}

export default () => <App />
Fn({ domProps, label }): React.Node
default: undefined
Custom render for display value. The display value is the text rendered inside the <ComboBox /> body, this text represents the label associated with the selected item (displayProperty).
label represents the displayProperty associated with the selected item.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
This prop is available only for single select (multiple=false).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

const renderDisplayValue = ({ domProps, label }) => {
  return <strong {...domProps}>value: {label}</strong>
}

export default () => <ComboBox
  dataSource={countries}
  style={{ width: 300 }}
  multiple={false}
  defaultValue="FR"
  renderDisplayValue={renderDisplayValue}
/>
Fn({props, data, value})
default: undefined
Render custom content at the bottom of dropdown list.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function renderFooter({ value }) {
  return <div style={{ borderTop: '1px solid #c5c5c5' }}>
    Total items selected: {value && value.length}
  </div>
}

export default () => <ComboBox
  multiple
  style={{ width: 300, zIndex: 1 }}
  renderFooter={renderFooter}
  dataSource={countries}
/>
Fn({ domProps, index, group }): React.Node
default: undefined
Custom render for group name.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

const dataSourceWithGroups = [
  { id: 1, label: 'red', group: 'color' },
  { id: 2, label: 'blue', group: 'color' },
  { id: 3, label: 'green', group: 'color' },
  { id: 4, label: 'yellow', group: 'color' },
  { id: 5, label: 'circle', group: 'shape' },
  { id: 6, label: 'line', group: 'shape' },
  { id: 7, label: 'triangle', group: 'shape' },
]

function renderGroup({ domProps, index, group }) {
  return <div {...domProps} style={{ background: '#37474f', color: 'rgb(217, 236, 255)' }} />
}

export default () => <ComboBox
    renderGroup={renderGroup}
    dataSource={dataSourceWithGroups}
  />
Fn({props, data, value})
default: undefined
Render custom content at the top of dropdown list.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function renderHeader({ value }) {
  return <div style={{ borderBottom: '1px solid #c5c5c5' }}>
    Total items selected: {value && value.length}
  </div>
}

export default () => <ComboBox
  multiple
  style={{ width: 300, zIndex: 1 }}
  renderHeader={renderHeader}
  dataSource={countries}
/>
Fn({domProps: Object, text: String, onChange: Fn})
default: undefined
Custom render for search input.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function renderInput({ domProps, text, onChange }) {
  domProps.style = {
    border: '1px solid rgb(217, 236, 255)',
    width: '50%'
  }
  domProps.onChange = (text) => {
    console.log(text)
    onChange(text)
  }
}

export default () => <ComboBox
  style={{width: 300}}
  multiple
  enableNavigation={true}
  dataSource={countries}
  renderInput={renderInput}
/>
Fn({domProps, item, data, index})
default: undefined
Custom render function for dropdown list item.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function renderItem({domProps, item, data, index}) {
  // with mutation
  if (index === 1) {
    domProps.style = { background: 'rgb(217, 236, 255)', fontWeight: '600' }
  }
  // custom render
  if (index === 2) {
    return <div {...domProps}>
      <small style={{ color: 'red' }}>new:</small> {domProps.children}
    </div>
  }
}

export default () => <ComboBox
    style={{width: 300}}
    multiple
    enableNavigation={true}
    dataSource={countries}
    renderItem={renderItem}
  />
Fn({ domProps, items, props }): React.Node
default: undefined
Custom dropdown list render function.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function renderList({ domProps, items, props }) {
  domProps.style = { border: '1px solid rgb(217, 236, 255)' }
}

export default () => <ComboBox
    style={{width: 300}}
    defaultExpanded
    multiple
    renderList={renderList}
    dataSource={countries}
  />
Fn({domProps: Object, item: Object|Object[], items: Object[], index: number, isMultiple: Bool}): React.Node
default: undefined
Custom render function for tag.
If you just want to customize the tag content (the label inside the tag), please see renderTagLabel, since it's easier to use.
This function takes the following params:
  • domProps: Object - props applied on DOM element
  • item: Object|Object[] - item from dataSource. When isMultiple=true, item will be an array of items that exceed maxTagsLength.
  • items: Object[] - list of all selected items
  • index: Number - tag render index
  • isMultiple: Bool - whether the tag is a multiple/combined tag. A combined tag is the tag that holds the information of the items that exceed maxTagsLength
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function renderTag({domProps, item, items, index}) {
    // with mutation
  if (index === 1) {
    if (domProps.style) {
      domProps.style.color = 'red'
    } else {
      domProps.style = { color: 'red' }
    }
  }

  // return jsx
  if (index !== 1) {
    return <span {...domProps}>T: {domProps.children}</span>
  }
}

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    multiple
    defaultValue={['RO', 'FR', 'DE', 'CO', 'IT']}
    renderTag={renderTag}
  />
Fn({label: String, isMultiple: Bool, index: Number, count: Number}): React.Node
default: undefined
Custom render function for the tag label.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import countries from './countries'

const renderTagLabel = ({ isMultiple, count, index, label }) => {
  if (!isMultiple) {
    return <span style={{ color: 'green'}}>{label}</span>
  }
  const remaining = count - index

  return remaining > 1 ?
    <span>{remaining} others</span> :
    <span>one more</span>
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      maxTagsLength: 2
    }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <span>Max tags length: </span>
        <NumericInput
          minValue={0}
          maxValue={100}
          style={{width: 70}}
          value={this.state.maxTagsLength}
          onChange={(maxTagsLength) => {
            this.setState({
              maxTagsLength
            })
          }}
        />
      </div>
      <ComboBox
        style={{width: 300}}
        maxTagsLength={this.state.maxTagsLength}
        renderTagLabel={renderTagLabel}
        dataSource={countries}
        multiple
        defaultValue={['UK', 'DE', 'USA', 'IT', 'FR']}
      />
    </div>
  }
}

export default () => <App />
Fn({ tags, items, value, visibleItems, remainingItems }): React.Node
default: undefined
Customize tags render.
If you only need to change how a single tag is rendered, use renderTagLabel or renderTag.
The function has the following params:
  • tags: React.Node[] - represents the tags to be rendered.
  • items: Object[] - all selected items from dataSource.
  • value : String|Number[] - represents the ComboBox value.
  • visibleItems: Object[] - list of visible items from dataSource, see maxTagsLength.
  • visibleItems: Object[] - list of items, from dataSource, that exceed the maxTagsLength limit.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function renderTags({ tags, items, value, visibleItems = [], remainingItems = [] }) {
  const newVisibleTags = visibleItems.map((item) => {
    return <span style={{ color:  '#333', border: '1px solid #777', borderRadius: 2, padding: 3 }}>
      {item.label}
    </span>
  })

  return [...newVisibleTags, remainingItems && remainingItems.length &&
    <span style={{ margin: 3 }}>and other {remainingItems.length} items</span>]
}

export default () => <ComboBox
    style={{width: 300}}
    maxTagsLength={3}
    multiple
    defaultValue={['RO', 'FR', 'DE', 'CO', 'IT']}
    dataSource={countries}
    renderTags={renderTags}
  />
Bool
default: false
Whether to use direction: rtl.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      rtl: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.rtl}
          onChange={(rtl) => {
            this.setState({
              rtl
            })
          }}
        >
          right-to-left
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        rtl={this.state.rtl}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Whether the <ComboBox /> can be searched.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      searchable: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.searchable}
          onChange={(searchable) => {
            this.setState({
              searchable
            })
          }}
        >
          Searchable
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        searchable={this.state.searchable}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Show clear icon only when mouse is over <ComboBox />.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showClearIconOnMouseOver: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.showClearIconOnMouseOver}
          onChange={(showClearIconOnMouseOver) => {
            this.setState({
              showClearIconOnMouseOver
            })
          }}
        >
          Show clear icon on mouse over
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        showClearIconOnMouseOver={this.state.showClearIconOnMouseOver}
        dataSource={countries}
        defaultValue={['CO', 'NL']}
        multiple
      />
    </div>
  }
}

export default () => <App />
number
default: 20
Specifies the initial pagination skip.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/NumericInput/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      skip: 20,
      dataSource: []
    }
  }

  loadDataSource() {
    const dataSource = config => {
      const { skip, limit, data } = config;

      return new Promise((resolve) => {
        resolve({
          data: countries.slice(skip, skip + limit),
          count: countries.length
        })
      })
    }

    this.setState({
      dataSource
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Max tags length:{' '}
        <NumericInput
          style={{width: 70}}
          value={this.state.skip}
          onChange={(skip) => this.setState({skip})}
        />
      </div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.loadDataSource()}>
          Load data source
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        skip={this.state.skip}
        dataSource={this.state.dataSource}
        enablePagination
      />
    </div>
  }
}

export default () => <App />
React.Node|Bool|Fn({ domProps, item, onDeselect }): React.Node
default: undefined
Custom render function for the tag close icon. It can be a function, a React.Node or a boolean (false for no close icon).
This prop is available only whenmultiple=true.
When it's a function, return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

function renderTagCloseIcon({ domProps, item, onDeselect }) {
  return <div {...domProps} style={{ border: '1px solid #333', marginLeft: 3 }} onClick={onDeselect}>
    <svg fill="#ff0000" height="11" viewBox="4 4 16 16" width="16">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </div>
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      rtl: false,
      showTagCloseIcon: true,
      customTagCloseIcon: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox checked={this.state.rtl}
          onChange={(rtl) => {
            this.setState({
              rtl
            })
          }}
        >
          Right to left
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox checked={this.state.showTagCloseIcon}
          onChange={(showTagCloseIcon) => {
            this.setState({
              showTagCloseIcon
            })
          }}
        >
          Show tag close icon
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20 }}>
        <CheckBox checked={this.state.customTagCloseIcon}
          onChange={(customTagCloseIcon) => {
            this.setState({
              customTagCloseIcon
            })
          }}
        >
          Use custom tag close icon
        </CheckBox>
      </div>
      <ComboBox
        multiple
        style={{ width: 300 }}
        dataSource={countries}
        rtl={this.state.rtl}
        defaultValue={['GB', 'FR', 'IT']}
        tagCloseIcon={this.state.showTagCloseIcon ?
          this.state.customTagCloseIcon ?
            renderTagCloseIcon :
            true
          : false
        }
      />
    </div>
  }
}

export default () => <App />
'start'|’end’
default: "end"
Position of close icon inside tag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      position: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <p><code>Current tag close icon position is: <b>{this.state.position ? 'start' : 'end'}</b>.</code></p>
        <CheckBox
          checked={this.state.position}
          onChange={(position) => this.setState({ position })}
        >
          Change position to close icon
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        tagCloseIconPosition={this.state.position ? 'start' : 'end'}
        dataSource={countries}
        multiple
        defaultValue={['GB', 'FR']}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Forces tag's text on one line, and display an ellipsis if needed.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      tagEllipsis: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.tagEllipsis}
          onChange={(tagEllipsis) => {
            this.setState({
              tagEllipsis
            })
          }}
        >
          Tag ellipsis
        </CheckBox>
      </div>
      <ComboBox
        tagEllipsis={this.state.tagEllipsis}
        dataSource={[...countries, { id: 'long', label: 'Very Long Country Name Text'}]}
        defaultValue={['long']}
        multiple
        style={{ width: 200 }}
      />
    </div>
  }
}

export default () => <App />
String
default: undefined
Controls the text inside search input. To react to text change see onTextChange.
For uncontrolled behaviour, see defaultText.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: 'Angola'
    }
  }
  render() {
    return <ComboBox
      style={{width: 300}}
      dataSource={countries}
      text={this.state.text}
      onTextChange={(text) => this.setState({ text })}
    />
  }
}

export default () => <App />
Bool
default: false
Whether to toggle expanded when <ComboBox /> is clicked.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      toggleExpandOnClick: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.toggleExpandOnClick}
          onChange={(toggleExpandOnClick) => {
            this.setState({
              toggleExpandOnClick
            })
          }}
        >
          Toggle expand on click
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        toggleExpandOnClick={this.state.toggleExpandOnClick}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
React.Node|Fn({domProps, expanded, onToggle})
default: undefined
Customize expand icon.
Return new React.Node or return undefined, and mutate domProps.
If it returns undefined, the mutated domProps are applied on the default implementation.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function toggleIcon({ expanded, domProps }) {
  const { className, onClick, size } = domProps
  return <span
    className={className}
    onClick={onClick}
    size={size}
    style={{ border: '1px solid #333', marginLeft: 3 }}
  >{
    expanded ?
      <svg fill="#000000" height="16" viewBox="4 4 16 16" width="16">
        <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
      </svg> :
      <svg fill="#000000" height="16" viewBox="4 4 16 16" width="16">
        <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
        <path d="M0-.75h24v24H0z" fill="none"/>
      </svg>
  }</span>
}

export default () => <ComboBox
  style={{width: 300}}
  multiple
  enableNavigation={true}
  dataSource={countries}
  toggleIcon={toggleIcon}
/>
String|String[]|Number|Number[]|Object|Object[]
default: undefined
Specifies the value of the <ComboBox />. When multiple=true it is an array of values.
It identifies the selected items, by default it identifies by the id property on the items inside dataSource. The identifier can be changed with idProperty.
Value can have objects that describe an item. This is useful when dataSource is a promise and you want to display a value before it resolves.
For uncontrolled behaviour, see defaultValue.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: [{ id: 1, label: 'Label from value'}]
    }
  }
  render() {
    return <ComboBox
      style={{width: 300}}
      multiple
      dataSource={countries}
      value={this.state.value}
      onChange={(value) => this.setState({ value })}
    />
  }
}

export default () => <App />
Fn(item): Bool
default: undefined
Determines when an item is selected weather it is a valid selection, if it returns false the item is not selected.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

function isSelectedItemValid(item) {
  const invalidValues = ['AF', 'AX', 'AL']
  return invalidValues.indexOf(item.id) === -1
}

export default () => <div>
  <p>
    In this example the first 3 items cannot be selected.
  </p>
  <ComboBox
    style={{width: 300}}
    multiple
    dataSource={countries}
    isSelectedItemValid={isSelectedItemValid}
  />
</div>
Fn(activeItem: String|Number)
default: undefined
Called when activeItem changes.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: null
    }
  }
  render() {
    return <div>
      <p>
        New active item is: {this.state.activeItem || 'null'}.
      </p>
      <ComboBox
        style={{width: 300}}
        dataSource={countries}
        activeItem={this.state.activeItem}
        onActiveItemChange={(activeItem) => {
          this.setState({ activeItem })
        }}
      />
    </div>
  }
}

export default () => <App />
Fn(activeTag: String|Number)
default: undefined
Called when activeTag changes.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeTag: null
    }
  }
  render() {
    return <ComboBox
      style={{width: 300}}
      multiple
      defaultValue={['RO', 'IT', 'CO', 'FR']}
      dataSource={countries}
      activeTag={this.state.activeTag}
      onActiveTagChange={(activeTag) => this.setState({ activeTag })}
    />
  }
}

export default () => <App />
Fn(value: String|String[])
default: undefined
Called when value changes.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

export default () => <div>
  <ComboBox
    style={{width: 300}}
    multiple
    enableNavigation={true}
    dataSource={countries}
    onChange={value => zippy.notification.first.addNotification({
      title: 'onChange',
      content: 'New value: ' + value
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn()
default: undefined
Called when expanded changes to false.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

export default () => <div>
  <ComboBox
    style={{width: 300}}
    dataSource={countries}
    onCollapse={() => zippy.notification.first.addNotification({
      title: 'onCollapse',
      content: 'Dropdown is collapsed'
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn()
default: undefined
Called when dataSource finishes loading. This can happen in case it is a Promise or changes via loadAsyncDataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'


function getPromise() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(countries)
    }, 3000
  )})
}

export default () => <div>
  <ComboBox
    style={{width: 300}}
    multiple
    enableNavigation={true}
    dataSource={getPromise()}
    onDataSourceLoad={() => zippy.notification.first.addNotification({
      title: 'onDataSourceLoad',
      content: 'The dataSource is loaded'
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn()
default: undefined
Called when expanded changes to true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

import countries from './countries'

export default () => <div>
  <ComboBox
    style={{width: 300}}
    dataSource={countries}
    onExpand={() => zippy.notification.first.addNotification({
      title: 'onExpand',
      content: 'The dropdown is expanded'
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn(expanded: Bool)
default: undefined
Alias for onExpandedChange.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

export default () => <div>
  <ComboBox
    style={{width: 300}}
    dataSource={countries}
    onExpandChange={(expanded) => zippy.notification.first.addNotification({
      title: 'onExpandChange',
      content: 'Expand: ' + expanded
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn(expanded: Bool)
default: undefined
Called when expanded changes.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

export default () => <div>
  <ComboBox
    style={{width: 300}}
    dataSource={countries}
    onExpandedChange={(expanded) => zippy.notification.first.addNotification({
      title: 'onExpandedChange',
      content: 'Expanded: ' + expanded
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn(item)
default: undefined
Called when items from dropdown list are clicked.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

export default () => <div>
  <ComboBox
    style={{width: 300}}
    multiple
    defaultValue={['CR', 'LK', 'PT']}
    enableNavigation={true}
    dataSource={countries}
    onItemClick={item => zippy.notification.first.addNotification({
      title: 'onItemClick',
      content: '{ ' + 'id: ' + item.id + '; label: ' + item.item.label + ' }'
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn(loading: Bool)
default: undefined
Called when loading changes.
Loading changes when dataSource is asynchronous or a new dataSource is loaded by loadAsyncDataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

function getPromise() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(countries)
    }, 1500
  )})
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loading: true
    }
  }

  render() {
    return <div>
      <ComboBox
        style={{width: 300}}
        loading={this.state.loading}
        dataSource={getPromise()}
        onLoadingChange={(loading) => {
          zippy.notification.board.addNotification({
            title: 'onLoadingChange',
            content: 'Loading change: ' + loading
          }),
          this.setState({ loading })
        }}
      />
      <NotificationBoard id="board" />
    </div>
  }
}

export default () => <App />
Fn(item)
default: undefined
Called when tag is clicked.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

export default () => <div>
  <ComboBox
    style={{width: 300}}
    multiple
    defaultValue={['CR', 'LK', 'PT']}
    enableNavigation={true}
    dataSource={countries}
    onTagClick={item => zippy.notification.first.addNotification({
      title: 'onTagClick',
      content: '{ ' + 'id: ' + item.id + '; ' + 'label: ' + item.label + ' }'
    })}
  />
  <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
</div>
Fn(text: String)
default: undefined
Called when the text changes.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: 'Angola'
    }
  }
  render() {
    return <div>
      <p>
        The default text is: {this.state.text || 'none'}.
      </p>
      <ComboBox
        dataSource={countries}
        text={this.state.text}
        onTextChange={(text) => this.setState({ text })}
      />
    </div>
  }
}

export default () => <App />
Object
default: "activeItemClassName"
Class name added on dropdown list item when it is active.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { id: 1, label: 'red' },
  { id: 2, label: 'blue', disabled: true },
  { id: 3, label: 'green' },
  { id: 4, label: 'yellow' },
]

export default () => <div>
  <ComboBox
    activeItemClassName="combobox-active-class"
    dataSource={dataSource}
  />
</div>
Object
default: "activeItemStyle"
Style applied on dropdown list item when it is active.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { id: 1, label: 'red' },
  { id: 2, label: 'blue', disabled: true },
  { id: 3, label: 'green' },
  { id: 4, label: 'yellow' },
]

export default () => <div>
  <ComboBox
    activeItemStyle={{ color: '#123', fontWeight: 600 }}
    dataSource={dataSource}
  />
</div>
String
default: undefined
Inline background style applied on <ComboBox /> body.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  background="rgb(217, 236, 255)"
/>
String
default: undefined
Inline border style applied on <ComboBox /> body.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  border="1px solid rgb(135, 236, 123)"
/>
Number|String
default: 3
Inline border-radius style applied on <ComboBox />.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  borderRadius="5px 0 0 5px"
/>
string
default: undefined
Class name added on <ComboBox />.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  className="combobox-background-green"
/>
String
default: undefined
Class name added when disabled=true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  disabled
  dataSource={countries}
  disabledClassName="combobox-background-green"
/>
Object
default: "disabledItemClassName"
Class name added on dropdown list item when it is disabled.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { id: 1, label: 'red' },
  { id: 2, label: 'blue', disabled: true },
  { id: 3, label: 'green' },
  { id: 4, label: 'yellow' },
]

export default () => <div>
  <ComboBox
    disabledItemClassName="combobox-background-disabled"
    dataSource={dataSource}
  />
</div>
Object
default: "disabledItemStyle"
Style applied on dropdown list item when it is disabled.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { id: 1, label: 'red' },
  { id: 2, label: 'blue', disabled: true },
  { id: 3, label: 'green' },
  { id: 4, label: 'yellow' },
]

export default () => <div>
  <ComboBox
    disabledItemStyle={{ color: '#123', fontWeight: 600 }}
    dataSource={dataSource}
  />
</div>
Object
default: undefined
Inline style applied when disabled=true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  disabled
  dataSource={countries}
  disabledStyle={{ background: 'rgb(217, 236, 255)'}}
/>
String
default: undefined
Class name added when value is empty.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  emptyClassName="combobox-background-green"
/>
Object
default: undefined
Inline style applied when value is empty.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    emptyStyle={{ background: 'rgb(217, 236, 255)'}}
  />
String
default: undefined
Class name added when <ComboBox /> has focus.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <div>
  <p>Click ComboBox to give focus.</p>
  <ComboBox
    style={{width: 300}}
    dataSource={countries}
    focusedClassName="combobox-background-green"
  />
</div>
Object
default: undefined
Inline style applied when <ComboBox /> has focus.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <div>
  <p>Click ComboBox to give focus.</p>
  <ComboBox
    style={{width: 300}}
    dataSource={countries}
    focusedStyle={{ background: 'rgb(217, 236, 255)'}}
  />
</div>
String
default: undefined
Class name added on search input.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  multiple
  enableNavigation={true}
  defaultText="United"
  dataSource={countries}
  inputClassName="combobox-background-green"
/>
Object
default: undefined
Inline style applied on search input.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  multiple
  enableNavigation={true}
  defaultText="United"
  dataSource={countries}
  inputStyle={{ width: '50%', background: 'rgb(217, 236, 255)' }}
/>
String
default: undefined
Inline background style applied on dropdown list item.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  itemBackground="rgb(217, 236, 255)"
/>
String
default: undefined
Class name added on dropdown list.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  multiple
  listClassName="combobox-background-green"
  enableNavigation={true}
  dataSource={countries}
/>
String|Number
default: undefined
Inline padding style applied on <ComboBox /> body.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
  style={{width: 300}}
  dataSource={countries}
  padding={10}
/>
String
default: undefined
Class name added on selected items inside dropdown list.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    defaultExpanded
    multiple
    defaultValue={[ 'AF', 'AL', 'AI' ]}
    dataSource={countries}
    selectedClassName="combobox-background-green"
  />
Object
default: undefined
Inline style applied on selected items inside dropdown list.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    multiple
    dataSource={countries}
    defaultExpanded
    selectedStyle={{ background: 'rgb(217, 236, 255)' }}
    defaultValue={[ 'AF', 'AL', 'AI' ]}
  />
Bool
default: false
Whether to add shadow.
This props is influenced by showShadowOnMouseOver.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      shadow: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.shadow}
          onChange={(shadow) => {
            this.setState({
              shadow
            })
          }}
        >
          Shadow
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        showShadowOnMouseOver={false}
        shadow={this.state.shadow}
        dataSource={countries}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to add shadow only when mouse is over.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import countries from './countries'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showShadowOnMouseOver: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.showShadowOnMouseOver}
          onChange={(showShadowOnMouseOver) => {
            this.setState({
              showShadowOnMouseOver
            })
          }}
        >
          showShadowOnMouseOver
        </CheckBox>
      </div>
      <ComboBox
        style={{width: 300}}
        showShadowOnMouseOver={this.state.showShadowOnMouseOver}
        dataSource={countries}
        shadow
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
Inline style applied on <ComboBox /> body.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    dataSource={countries}
    style={{ width: 300, border: '1px solid rgb(217, 236, 255)'}}
  />
Object
default: undefined
Inline style applied on activeTag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    multiple
    defaultValue={['GB', 'CO', 'IT']}
    defaultActiveTag={'CO'}
    tagActiveStyle={{ background: '#d4e2ff' }}
  />
String
default: undefined
Inline border style applied on tag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    multiple
    tagBorder="1px solid gray"
    defaultValue={["GB"]}
  />
Number|string
default: undefined
Inline height style applied on tag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    multiple
    defaultValue={["GB"]}
    tagHeight={35}
  />
String|Number|{width:String|Number, height:String|Number}
default: undefined
Used to set tag maxWidth and maxHeight.
If is a Number|String both dimensions will have the same value.
See related tagMinSize.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    multiple
    dataSource={countries}
    tagMaxSize={{ width: 100, height: 30 }}
    defaultValue={['GB', 'IT', 'CO']}
  />
String|Number|{width:String|Number, height:String|Number}
default: undefined
Used to set tag minWidth and minHeight.
If is a Number|String both dimensions will have the same value.
See related tagMaxSize.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    multiple
    dataSource={countries}
    tagMinSize={{ width: 120, height: 40 }}
    defaultValue={['GB', 'IT', 'CO']}
  />
Number|string
default: undefined
Inline padding style applied on tag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    multiple
    defaultValue={["GB"]}
    tagPadding="5px 2px 5px 10px"
  />
Object
default: undefined
Inline style applied on tag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <ComboBox
    style={{width: 300}}
    dataSource={countries}
    multiple
    tagStyle={{ border: "1px solid gray" }}
    defaultValue={["GB"]}
  />
Number|string
default: undefined
Inline width style applied on tag.
This prop is available only for multiple select (multiple=true).
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import countries from './countries'

export default () => <div>
  <div style={{ marginBottom: 20 }}>
    The tag has 120px.
  </div>
  <ComboBox
    dataSource={countries}
    multiple
    style={{ width: 300 }}
    defaultValue={["GB"]}
    tagWidth={120}
  />
</div>
Fn(item: Object)
undefined
Adds item at the end of the dataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const dataSource = [
  { label: 'red' },
  { label: 'black' },
  { label: 'yellow' },
  { label: 'blue' },
]

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      newItem: 'pink'
    }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        Add an item:{' '}
        <input
          style={{ width: 100, marginRight: 20 }}
          value={this.state.newItem}
          onChange={(ev) => this.setState({ newItem: ev.target.value })}
        />
        <Button onClick={() => this.combo.addItem({ label: this.state.newItem })}>
          add new item
        </Button>
      </div>
      <ComboBox
        ref={ref => this.combo = ref}
        dataSource={dataSource}
      />
    </div>
    }
}

export default () => <App />
Fn()
undefined
Removes focus from <ComboBox />.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <div style={{ marginBottom: 20 }}>
          When you press the button, you give focus back to ComboBox through focus()
          method, and after 600ms, the component will blur.
        </div>
        <Button onClick={(event) =>  {
          // give focus back
          this.combo.focus()

          // blur after 300ms
          setTimeout(() => {
            this.combo.blur()
          }, 600)
        }}>
          blur
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        autoFocus
        multiple
        defaultValue={['AQ', 'NO', 'SE']}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn(item: Object)
undefined
Clears text and value.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.combo.clear()}>
          clear text and value
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        ref={ref => this.combo = ref}
        dataSource={countries}
        defaultValue={['BE', 'BN', 'DK']}
        defaultText="Italy"
      />
    </div>
    }
}

export default () => <App />
Fn()
undefined
Changes expanded to false.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.combo.collapse()}>
          collapse
        </Button>
        {' '}
        <Button onClick={() => this.combo.expand()}>
          expand
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        autoFocus
        multiple
        defaultValue={['AQ', 'NO', 'SE']}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn(id: String|Number)
undefined
If multiple=true, it will remove it to value list. If multiple=false, it will change value to null.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.deselectItem('AQ')
        }}>
          deselect item with 'AQ' id.
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        defaultValue={['AQ', 'NO', 'SE']}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn()
undefined
Changes expanded to true.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => this.combo.expand()}>
          expand
        </Button>
        {' '}
        <Button onClick={() => this.combo.collapse()}>
          collapse
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        autoFocus
        multiple
        defaultValue={['AQ', 'NO', 'SE']}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn()
undefined
Focuses <ComboBox />.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.focus()
        }}>
          focus
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        defaultValue={['AQ', 'NO', 'SE']}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn(id: String|Number)
Object
Returns the item from dataSource with the passed id; see idProperty.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          const item = this.combo.getItem('IT')
          zippy.notification.first.addNotification({
            title: 'getItem',
            content: 'Item id : ' + item.id + '; ' + 'label: ' + item.label
          })
        }}>
          get the item with id 'IT'
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
      <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
    </div>
    }
}

export default () => <App />
Fn()
Number
Returns the length of the dataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          const length = this.combo.getItemCount()
          zippy.notification.first.addNotification({
            title: 'getItemCount',
            content: length + 'items'
          })
        }}>
          get the item count
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
      <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
    </div>
    }
}

export default () => <App />
Fn()
String
Returns the value of text.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          const length = this.combo.getText()
          zippy.notification.first.addNotification({
            title: 'getText',
            content: 'Text: ' + length
          })
        }}>
          get text
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        clearTextOnBlur={false}
        ref={ref => this.combo = ref}
        defaultText="United"
        dataSource={countries}
      />
      <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
    </div>
    }
}

export default () => <App />
Fn()
value
Returns value.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          const value = this.combo.getValue()
          zippy.notification.first.addNotification({
            title: 'getValue',
            content: 'Value: ' + value
          })
        }}>
          get value
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        clearTextOnBlur={false}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
      <NotificationBoard offset={{top:6, right: 20}} style={{marginTop: 60}} id="first" />
    </div>
    }
}

export default () => <App />
Fn({item: Object, index: Number})
undefined
Inserts an item inside dataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const dataSource = [
  { id: 1, label: 'red' },
  { id: 2, label: 'blue' },
  { id: 3, label: 'green' },
  { id: 4, label: 'yellow' },
]

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.insertItem({
            index: 1,
            item: { label: 'pink', id: 5 }
          })
        }}>
          insert <b>pink</b> option at position 1
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        clearTextOnBlur={false}
        ref={ref => this.combo = ref}
        dataSource={dataSource}
      />
    </div>
    }
}

export default () => <App />
Fn(ids: <String|Number>[])
undefined
An id or a list of ids to remove from dataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

const dataSource = [
  { id: 1, label: 'red' },
  { id: 2, label: 'blue' },
  { id: 3, label: 'green' },
  { id: 4, label: 'yellow' },
  { id: 5, label: 'pink' },
]

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.removeItems([1, 3, 5])
        }}>
          remove options with ids [1, 3, 5]
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        ref={ref => this.combo = ref}
        dataSource={dataSource}
      />
    </div>
    }
}

export default () => <App />
Fn(id: String|Number)
undefined
An id or a list of ids to remove from dataSource.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.scrollToId('NZ')
        }}>
          scroll to item with 'NZ' id.
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        expanded
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn(id: String|Number)
undefined
If multiple=true, it will add it to value list. If multiple=false, it will change value.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.selectItem('AQ')
        }}>
          select item with 'AQ' id.
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn(text: String|Number)
undefined
Changes text.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.setText('United')
        }}>
          change text to 'United'
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        defaultValue={['AQ', 'NO', 'SE']}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />
Fn()
undefined
Toggles expanded value.
import React from 'react'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import countries from './countries'

class App extends React.Component {
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() =>  {
          this.combo.toggle()
        }}>
          toggle expanded
        </Button>
      </div>
      <ComboBox
        style={{width: 300}}
        multiple
        defaultValue={['AQ', 'NO', 'SE']}
        ref={ref => this.combo = ref}
        dataSource={countries}
      />
    </div>
    }
}

export default () => <App />