LOGO
Usage

MultiSelect

Simple

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect options={options} onChange={handleSelect} />
 );
};

export default App;

Search

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      isSearchable
   />
 );
};

export default App;

Select To Show Checked

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      checked={false}
   />
 );
};

export default App;

Customize Width

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      isSearchable
   />
 );
};

export default App;

Customize Height

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      maxHeight={500}
   />
 );
};

export default App;

Creatable

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect}
      isSearchable 
      creatable
   />
 );
};

export default App;

Disabled

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      disabled
   />
 );
};

export default App;

Size

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];
  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      size={"sm"}
   />
 );
};

export default App;

Default

Raspberry Pineapple
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect}
      isSearchable 
      creatable
   />
 );
};

export default App;

Maximum Acceptable Items Limit

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      maxAcceptItem={5}
   />
 );
};

export default App;

PlaceholderText

Select Item...
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      placeholderText={"Select Item..."}
   />
 );
};

export default App;

Empty State

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      emptyState={"Item Not Found"}
   />
 );
};

export default App;

Maximum Item To Show

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      maxLengthShow={6}
   />
 );
};

export default App;

Hide Header

Select Item
Chocolate
Strawberry
Vanilla
Strawberry

import React, { useState } from "react";
import { MultiSelect, Options } from "react-multis";

const App = () => {
  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "strawberryss", label: "Strawberry" },
  ];

  const handleSelect = (selectedValue: Options[]) => {
    console.log(selectedValue);
  };
 return (
   <MultiSelect 
      options={options} 
      onChange={handleSelect} 
      hideHeader
   />
 );
};

export default App;
Copyright © saimundev