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

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

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

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