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

# MultiSelectField labelNode Removal

> Guide for migrating from the labelNode prop to inline markdown in the label string.

export const VersionStatus = ({version}) => {
  const isUnreleased = version === "unreleased";
  return <Badge color={isUnreleased ? "orange" : "green"}>
      {isUnreleased ? "Unreleased" : `v${version}`}
    </Badge>;
};

<VersionStatus version="2.8.0" />

<Note>
  This guide covers changes to the **beta** MultiSelectField component. These APIs
  may continue to evolve before the stable release.
</Note>

## Overview

The `labelNode` prop has been removed from `MultiSelectField` and `MultiSelectFieldSync`. Use the `label` string with inline markdown instead.

## Design Rationale

### Why remove `labelNode`?

Previously, `labelNode` accepted a `ReactNode` to render custom label content — but this bypassed the accessible label system and required maintaining two separate props for a single concept.

```tsx theme={null}
// Before: Two props, one bypasses accessibility
<MultiSelectField
  label="Select tags" // Used for aria-label only
  labelNode={<><strong>Select</strong> tags</>} // Used for visual label
  loadOptions={fetchTags}
  value={values}
  onSelectedOptionsChange={setValues}
/>
```

The `label` prop now accepts inline markdown, which renders visually while still producing a clean plain-text accessible label — no second prop needed.

```tsx theme={null}
// After: One prop handles both visual and accessible label
<MultiSelectField
  label="**Select** tags"
  loadOptions={fetchTags}
  value={values}
  onSelectedOptionsChange={setValues}
/>
```

## Supported Markdown

| Syntax       | Result            |
| ------------ | ----------------- |
| `**text**`   | **Bold**          |
| `*text*`     | *Italic*          |
| `***text***` | ***Bold italic*** |
| `==text==`   | Highlighted       |
| `` `text` `` | `Code`            |

## Migration Guide

### Bold or italic label text

```tsx theme={null}
// Before
<MultiSelectField
  label="Assignees"
  labelNode={<><strong>Assignees</strong> (optional)</>}
  loadOptions={fetchUsers}
  value={values}
  onSelectedOptionsChange={setValues}
/>

// After
<MultiSelectField
  label="**Assignees** (optional)"
  loadOptions={fetchUsers}
  value={values}
  onSelectedOptionsChange={setValues}
/>
```

### Plain label with no formatting

If `labelNode` was rendering the same text as `label`, remove it entirely:

```tsx theme={null}
// Before
<MultiSelectFieldSync
  label="Colors"
  labelNode={<span>Colors</span>}
  options={options}
  value={values}
  onSelectedOptionsChange={setValues}
/>

// After
<MultiSelectFieldSync
  label="Colors"
  options={options}
  value={values}
  onSelectedOptionsChange={setValues}
/>
```

## Breaking Changes

<Warning>
  These changes require code updates before upgrading. The previous API is no
  longer supported.
</Warning>

* `labelNode` has been **removed** from `MultiSelectField` and `MultiSelectFieldSync` — Use inline markdown in the `label` string instead.

### Why Breaking?

As a beta API, `labelNode` was removed directly without a deprecation path. The `label` prop now handles all label content through inline markdown, making `labelNode` unnecessary.