Skip to main content

MultiSelectField

Storybook

To implement MultiSelectField component into your project you'll need to add the import:

import { MultiSelectField } from "@shoptet/ui";

After adding import into your project you can use it simply like:

<MultiSelectField
  label="Label"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    {
      title: "Section 1",
      options: [
        { label: "Option 3", value: "3" },
        { label: "Option 4", value: "4" },
      ],
    },
    {
      title: "Section 2",
      options: [
        { label: "Option 5", value: "5" },
        { label: "Option 6", value: "6" },
      ],
    },
  ]}
  getOptionValue={(option) => ("value" in option ? option.value : option.title)}
  getOptionLabel={(option) => ("label" in option ? option.label : option.title)}
  renderLabel={(option) => ("label" in option ? option.label : undefined)}
  getGroupOptions={(section) =>
    "options" in section ? section.options : undefined
  }
/>