> ## 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 selectAll checkState

> Guide for adopting the isChecked to checkState rename in selectAll.

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

<VersionStatus version="2.1.0" />

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

## Overview

The `isChecked` property on `selectAll` has been renamed to `checkState`.

The accepted values are unchanged: `true`, `false`, `"checked"`, `"unchecked"`, `"indeterminate"`, or `"loading"`.

## Design Rationale

### Why `checkState`?

The name `isChecked` implies a boolean value, but the property actually accepts a multi-value state that includes `"indeterminate"` and `"loading"`. Renaming to `checkState` better communicates that the property represents a broader state than a simple boolean toggle.

This also establishes a consistent naming convention with the new `selectFiltered` API, which uses `checkState` for the same purpose.

```tsx theme={null}
// Before: Name suggests boolean, but accepts string states
selectAll={{
  onClick: handleSelectAll,
  isChecked: "indeterminate", // Misleading — "isChecked" sounds like true/false
}}

// After: Name accurately reflects multi-value state
selectAll={{
  onClick: handleSelectAll,
  checkState: "indeterminate", // Clear — it's a state, not a boolean flag
}}
```

## checkState Values

| Value             | Visual          | When to use                                                                                     |
| ----------------- | --------------- | ----------------------------------------------------------------------------------------------- |
| `"checked"`       | Filled checkbox | All items are selected                                                                          |
| `"unchecked"`     | Empty checkbox  | No items are selected                                                                           |
| `"indeterminate"` | Dash checkbox   | Some but not all items are selected                                                             |
| `"loading"`       | Spinner         | The selection action is performing an async operation (e.g., a server request) before resolving |

`"indeterminate"` communicates partial selection. For example, if a list has 10 items and 4 are selected, the Select All checkbox shows a dash to indicate "some selected, but not all." This gives users a clear signal that clicking will either select the remaining items or deselect the current ones.

`"loading"` replaces the checkbox with a spinner. Use this when clicking Select All triggers an async action -- such as fetching all available IDs from a server -- and you need to show the user that the operation is in progress before the selection resolves.

## Migration Guide

Rename `isChecked` to `checkState` in your `selectAll` config object:

```tsx theme={null}
// Before
<MultiSelectField
  selectAll={{
    onClick: handleSelectAll,
    isChecked: allSelected ? "checked" : someSelected ? "indeterminate" : "unchecked",
  }}
/>

// After
<MultiSelectField
  selectAll={{
    onClick: handleSelectAll,
    checkState: allSelected ? "checked" : someSelected ? "indeterminate" : "unchecked",
  }}
/>
```

## Breaking Changes

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

* `selectAll.isChecked` has been **removed** — Use `selectAll.checkState` instead

### Why Breaking?

As a beta API, `isChecked` was renamed directly without a deprecation path. The fix is a straightforward find-and-replace of the property name with no changes to accepted values or behavior.