> ## 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.

v2.8.0

> [!NOTE]
>
> This guide covers changes to the **beta** MultiSelectField component. These APIs
> may continue to evolve before the stable release.

## 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.

* `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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.