> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi Select metadata field

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

A metadata field of type `multiSelect` is displayed to a user as a dropdown
list. The user can select multiple items from the list.

<Frame border center shadow width="400">
  <img src="https://mintcdn.com/box/GzVau-cpK5Cm5MBq/guides/metadata/fields/metadata-field-multi-select.png?fit=max&auto=format&n=GzVau-cpK5Cm5MBq&q=85&s=6a236d0e765929b99b7c7c8fd998c8a5" alt="String field" width="672" height="404" data-path="guides/metadata/fields/metadata-field-multi-select.png" />
</Frame>

<Note>
  A `multiSelect` field allows a user to select zero, one, or more values. To force
  a user to select only one value at most, use the <Link href="/guides/metadata/fields/enum">`enum`</Link> template
  field.
</Note>

## Create a `multiSelect` field

A `multiSelect` field can be added to a metadata template either when <Link href="/guides/metadata/templates/create">creating
a metadata template</Link>, or when <Link href="/guides/metadata/templates/update">updating a
template</Link> with the `addField` operation.

The required attributes for a `multiSelect` field are a `type`, a `displayName`,
a `key`, and a list of options.

```json theme={null}
{
  "scope": "enterprise",
  "displayName": "Contract",
  "fields": [
    {
      "type": "multiSelect",
      "key": "box_entity",
      "displayName": "Box Entity",
      "description": "The Box entity that this contract belongs to",
      "hidden": false,
      "options": [
        {"key": "Box, Inc"},
        {"key": "Box.com (UK) Ltd."},
        {"key": "KK Box Japan"}
      ]
    }
  ]
}
```

Optionally, a `description` can be provided that is shown to a user in the UI,
and the field can be set to `hidden` to hide it from users in the web and mobile
apps.

## Update a `multiSelect` field

A `multiSelect` template field can be updated by <Link href="/guides/metadata/templates/update">updating the
template</Link> it belongs to. Updates to templates happen through
**operations** to ensure that any template that is already assigned to a file or
folder is updated as well.

### Change basic field values

When updating a `multiSelect` metadata field, one of the possible operations is
the `editField` operation, which can be used to change the field's `key`,
`displayName`, `description`, and `hidden` values.

```json theme={null}
[
  {
    "op": "editField",
    "fieldKey": "box_entity",
    "data": {
      "displayName": "Box Entities",
      "key": "box_entities"
    }
  }
]
```

<Info>
  The `fieldKey` here represents the original key of the field to change. The
  `data.key` field is the new key of the field.
</Info>

<Warning>
  This will affect existing instances of this template.
</Warning>

### Add an option

Adding an option to a `multiSelect` field can be achieved through the
`addMultiSelectOption` operation. The operation expects the `fieldKey` to be set
to the key of the `multiSelect` field to change, and a `data` object with the
`key` of the new option to add.

```json theme={null}
[
  {
    "op": "addMultiSelectOption",
    "fieldKey": "box_entity",
    "data": {
      "key": "Box (NL) BV"
    }
  }
]
```

The list of options should now be as follows.

```json theme={null}
...
"options": [
  {"key": "Box, Inc"},
  {"key": "Box.com (UK) Ltd."},
  {"key": "KK Box Japan"},
  {"key": "Box (NL) BV"}
]
...
```

<Warning>
  This will affect existing instances of this template.
</Warning>

### Reorder options

Reordering the options in a `multiSelect` field can be achieved through the
`reorderMultiSelectOptions` operation. The operation expects the `fieldKey` to
be set to the key of the `multiSelect` field to change, and a
`multiSelectOptionKeys` array with the keys of the options in order.

```json theme={null}
[
  {
    "op": "reorderMultiSelectOptions",
    "fieldKey": "box_entity",
    "multiSelectOptionKeys": [
      "Box, Inc",
      "Box.com (UK) Ltd.",
      "Box (NL) BV",
      "KK Box Japan"
    ]
  }
]
```

The list of options should now be as follows.

```json theme={null}
...
"options": [
  {"key": "Box, Inc"},
  {"key": "Box.com (UK) Ltd."},
  {"key": "Box (NL) BV"},
  {"key": "KK Box Japan"}
]
...
```

<Warning>
  New options can not be added with this operation. This will affect existing
  instances of this template.
</Warning>

### Edit an option

Editing an option of a `multiSelect` field can be achieved through the
`editMultiSelectOption` operation. The operation expects the `fieldKey` to be
set  to the key of the `multiSelect` field to change, and a
`multiSelectOptionKey` to be set to the key of the field option. Finally, it
expects a `data` object with the new `key` of the field option.

```json theme={null}
[
  {
    "op": "editMultiSelectOption",
    "fieldKey": "box_entity",
    "multiSelectOptionKey": "Box (NL) BV",
    "data": {
      "key": "Box.nl BV"
    }
  }
]
```

The list of options should now be as follows.

```json theme={null}
...
"options": [
  {"key": "Box, Inc"},
  {"key": "Box.com (UK) Ltd."},
  {"key": "Box.nl BV"},
  {"key": "KK Box Japan"}
]
...
```

<Warning>
  This will affect existing instances of this template.
</Warning>

### Remove an option

Removing an option from a `multiSelect` field can be achieved through the
`removeMultiSelectOption` operation. The operation expects the `fieldKey` to be set
to the key of the `multiSelect` field to change, and a `multiSelectOptionKey`
to be set to the key of the field option to remove.

```json theme={null}
[
  {
    "op": "removeMultiSelectOption",
    "fieldKey": "customer_state",
    "multiSelectOptionKey": "KK Box Japan"
  }
]
```

The list of options should now be as follows.

```json theme={null}
...
"options": [
  {"key": "Box, Inc"},
  {"key": "Box.com (UK) Ltd."},
  {"key": "Box.nl BV"}
]
...
```

<Warning>
  This will affect existing instances of this template. Any fields that were set
  to this value will have the value removed from its list of selected values.
</Warning>

<RelatedLinks
  title="RELATED APIS"
  items={[
{ label: translate("Update metadata template"), href: "/reference/put-metadata-templates-id-id-schema", badge: "PUT" }
]}
/>

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Create a metadata template"), href: "/guides/metadata/templates/create", badge: "GUIDE" },
{ label: translate("Update a metadata template"), href: "/guides/metadata/templates/update", badge: "GUIDE" }
]}
/>
