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

# SelectField 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** SelectField component. These APIs
> may continue to evolve before the stable release.

## Overview

The `labelNode` prop has been removed from `SelectField` and `SelectFieldSync`. 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
<SelectField
  label="Search books" // Used for aria-label only
  labelNode={<><strong>Search</strong> books</>} // Used for visual label
  loadOptions={fetchBooks}
  value={value}
  onSelectedOptionChange={setValue}
/>
```

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
<SelectField
  label="**Search** books"
  loadOptions={fetchBooks}
  value={value}
  onSelectedOptionChange={setValue}
/>
```

## 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
<SelectField
  label="Category"
  labelNode={<><strong>Category</strong> (required)</>}
  loadOptions={fetchCategories}
  value={value}
  onSelectedOptionChange={setValue}
/>

// After
<SelectField
  label="**Category** (required)"
  loadOptions={fetchCategories}
  value={value}
  onSelectedOptionChange={setValue}
/>
```

### Plain label with no formatting

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

```tsx theme={null}
// Before
<SelectFieldSync
  label="Size"
  labelNode={<span>Size</span>}
  options={options}
  value={value}
  onSelectedOptionChange={setValue}
/>

// After
<SelectFieldSync
  label="Size"
  options={options}
  value={value}
  onSelectedOptionChange={setValue}
/>
```

## Breaking Changes

> [!WARNING]
>
> These changes require code updates before upgrading. The previous API is no
> longer supported.

* `labelNode` has been **removed** from `SelectField` and `SelectFieldSync` — 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.