
## MultiSelect Input
```jsx
const options = [
  { label: "Avocado with a very long content->Lead creation", value: "avocado" },
  { label: "Crab", value: "crab" },
  { label: "Soy Sauce", value: "soy-sauce" },
  { label: "Cucumber", value: "cucumber" },
  { label: "Nori", value: "nori" },
  { label: "Ginger", value: "ginger" },
  { label: "Rice", value: "rice" }
];

<MultiSelect placeholder="Select ingredients" className="w-56" options={options} />
```

With default values and a disabled option
```jsx
const options = [
  { label: "Avocado", value: "avocado" },
  { label: "Crab", value: "crab" },
  { label: "Soy Sauce", value: "soy-sauce" },
  { label: "Cucumber", value: "cucumber" },
  { label: "Nori", value: "nori", disabled: true },
  { label: "Ginger", value: "ginger" },
  { label: "Rice", value: "rice" }
];

const handleChange = (event) => {
  console.log(event);
};

<MultiSelect
  name="ingredients"
  placeholder="Select ingredients"
  options={options}
  value={["avocado", "crab"]}
  onChange={handleChange}
/>
```

A disabled multiselect input
```jsx
const options = [
  { label: "Avocado", value: "avocado" },
  { label: "Crab", value: "crab" },
  { label: "Soy Sauce", value: "soy-sauce" },
  { label: "Cucumber", value: "cucumber" },
  { label: "Nori", value: "nori" },
  { label: "Ginger", value: "ginger" },
  { label: "Rice", value: "rice" }
];

<MultiSelect
  name="ingredients"
  placeholder="Select ingredients"
  options={options}
  value={["avocado", "crab"]}
  disabled
/>
```

with option to create new items
```jsx
const options = [
  { label: "Avocado", value: "avocado" },
  { label: "Crab", value: "crab" },
  { label: "Soy Sauce", value: "soy-sauce" },
  { label: "Cucumber", value: "cucumber" },
  { label: "Nori", value: "nori" },
  { label: "Ginger", value: "ginger" },
  { label: "Rice", value: "rice" }
];

const handleChange = (event) => {
  console.log(event);
};

<MultiSelect
  create
  name="ingredients"
  placeholder="Select ingredients"
  options={options}
  onChange={handleChange}
/>
```

## MultiSelect filter
```jsx
import Button from "../button";
const options = [
  { label: "Avocado", value: "avocado" },
  { label: "Crab", value: "crab" },
  { label: "Soy Sauce", value: "soy-sauce" },
  { label: "Cucumber", value: "cucumber" },
  { label: "Nori", value: "nori" },
  { label: "Ginger", value: "ginger" },
  { label: "Rice", value: "rice" }
];

const [value, setValue] = React.useState(["rice", "soy-sauce"]);

const clear = () => {
  setValue([]);
};

const handleChange = (event) => {
  console.log(event);
};

<div>
<MultiSelect
  type="filter"
  label="Select ingredients"
  options={options}
  value={value}
  onChange={handleChange}
/>


<div className="mt-2">
<Button is="secondary" onClick={clear}>Clear selections</Button>
</div>
</div>
```