Searchable Multiselect

Usage

A searchable multi-select allows a user to easily filter a long list of options with a text search function.

Common Characteristics

is component combines a text search input and a checkbox list. The text search filters the checkbox list, making it easier for the user to find the option they wish to select.

The search function is configured to sort initial character matches to the top followed by internal character matches.

Audi

32

BMW

12

Cadillac

55

Chevrolet

43

Ford

6

Honda

102

Hyundai

211

Mazda

23

Mercedes-Benz

4

Search sorts initial character matches to the top of the list.

Optional Sub-headings

The checkbox list can be optionally divided into sub-groups with sub-headings (e.g. “recent”, “popular”, etc). However, divisions and headings must be removed after the user begins to type in the text input.

Recent

Audi

32

Honda

102

Mazda

23

All Makes

Ford

6

Honda

102

Hyundai

211

Mazda

23

Mercedes-Benz

4

Using the text search removes the section headings.

Usage Guidelines

The searchable multi-select can be nested in an accordion on larger screens. On small screens, it can be nested in a slide out panel.

Makes

Recent

Audi

32

Honda

102

Mazda

23

All Makes

Audi

32

BMW

12

Cadillac

55

Chevrolet

43

Ford

6

Honda

102

Hyundai

211

Mazda

23

Mercedes-Benz

4

Code

Default

Live Editor

function DefaultList() { const dataMakes = [ { label: 'Audi', count: 32, value: 'Audi', }, { label: 'BMW', count: 12, value: 'BMW', }, { label: 'Cadillac', count: 55, value: 'Cadillac', }, { label: 'Chevrolet', count: 43, value: 'Chevrolet', }, ]; return ( <Searchable> <Searchable.Search /> <Searchable.List data={dataMakes} /> </Searchable> ); }

function DefaultList() {
  const dataMakes = [
    { label: 'Audi', count: 32, value: 'Audi', },
    { label: 'BMW', count: 12, value: 'BMW', },
    { label: 'Cadillac', count: 55, value: 'Cadillac', },
    { label: 'Chevrolet', count: 43, value: 'Chevrolet', },
  ];
  return (
    <Searchable>
      <Searchable.Search />
      <Searchable.List data={dataMakes} />
    </Searchable>
  );
}

Result

Loading...

---

With Headings

Live Editor

function ListHeadings() { const recents = [ { label: 'Audi', count: 32, value: 'Audi' }, { label: 'Honda', count: 102, value: 'Honda' }, ]; const makes = [ { label: 'Mazda', count: 23, value: 'Mazda' }, { label: 'Mercedes-Benz', count: 4, value: 'Mercedes-Benz' }, ]; return ( <Searchable> <Searchable.Search /> <Searchable.List heading="Recent" data={recents} /> <Searchable.List heading="All Makes" data={makes} /> </Searchable> ); }

function ListHeadings() {
  const recents = [
    { label: 'Audi', count: 32, value: 'Audi' },
    { label: 'Honda', count: 102, value: 'Honda' },

  ];
  const makes = [
    { label: 'Mazda', count: 23, value: 'Mazda' },
    { label: 'Mercedes-Benz', count: 4, value: 'Mercedes-Benz' },
  ];
  return (
    <Searchable>
      <Searchable.Search />
      <Searchable.List heading="Recent" data={recents} />
      <Searchable.List heading="All Makes" data={makes} />
    </Searchable>
  );
}

Result

Loading...

---

Nested in an Accordion

Live Editor

function NestedAccordion() { const recents = [ { label: 'Audi', count: 32 }, { label: 'Honda', count: 102 }, { label: 'Mazda', count: 23 }, ]; const makes = [ { label: 'Audi', count: 32 }, { label: 'BMW', count: 12 }, { label: 'Cadillac', count: 55 }, { label: 'Chevrolet', count: 43 }, ]; return ( <div style={{ height: '300px' }}> <Accordion> <Accordion.Input triggerTag="div" variant="filter" title="Makes"> <Searchable> <Searchable.Search /> <Searchable.List heading="Recent" data={recents} /> </Searchable> </Accordion.Input> </Accordion> </div> ); }

function NestedAccordion() {


  const recents = [
    { label: 'Audi', count: 32 },
    { label: 'Honda', count: 102 },
    { label: 'Mazda', count: 23 },
  ];
  const makes = [
    { label: 'Audi', count: 32 },
    { label: 'BMW', count: 12 },
    { label: 'Cadillac', count: 55 },
    { label: 'Chevrolet', count: 43 },
  ];
  return (
    <div style={{ height: '300px' }}>
      <Accordion>
        <Accordion.Input   triggerTag="div" variant="filter" title="Makes">
          <Searchable>
            <Searchable.Search />
            <Searchable.List  heading="Recent" data={recents} />
          </Searchable>
        </Accordion.Input>
      </Accordion>
    </div>
  );
}

Result

Loading...

The Accordion Input's onClear function needs to be defined. The Searchable list will clear all checks if deselect is passed boolean true.

Controlled

Live Editor

function Controlled() { const [list, setList] = useState([ { label: 'red', count: 2, checked: true }, { label: 'blue', count: 96, checked: true }, { label: 'green', count: 19, checked: false }, { label: 'gold', checked: false }, ]); function toggleAll(value) { setList(list.map(i => ({ ...i, checked: value}))) } function handleListChange(event, listObject) { setList(listObject) } function handleSearchChange(searchString) { console.log('search', searchString); } return ( <div> <Searchable> <button onClick={() => toggleAll(true)}>Select All</button> <button onClick={() => toggleAll(false)}>Deselect All</button> <Searchable.Search onChange={(handleSearchChange)} /> <Searchable.List onChange={handleListChange} heading="Colors" icon="search" data={list} /> </Searchable> </div> ); }

function Controlled() {
  const [list, setList] = useState([
    { label: 'red', count: 2, checked: true },
    { label: 'blue', count: 96,  checked: true },
    { label: 'green', count: 19,  checked: false },
    { label: 'gold',  checked: false },
  ]);

  function toggleAll(value) {
    setList(list.map(i => ({ ...i, checked: value})))
  }

  function handleListChange(event, listObject) {
    setList(listObject)
  }

  function handleSearchChange(searchString) {
    console.log('search', searchString);
  }

  return (
    <div>
      <Searchable>
        <button onClick={() => toggleAll(true)}>Select All</button>
        <button onClick={() => toggleAll(false)}>Deselect All</button>
        <Searchable.Search onChange={(handleSearchChange)} />
        <Searchable.List
          onChange={handleListChange}
          heading="Colors"
          icon="search"
          data={list}
        />
      </Searchable>
    </div>
  );
}

Result

Loading...

Searchable.List

property	propType	required	default	description
onChange	func	-	() =>
data	array | object	-	[]
heading	string	-	null
icon	string	-	null
selectAll	bool	-	null
className	string	-	-
chipColor	string	-	medium	This property controls the color of the chip. Options are 'light', 'medium' and 'dark'.