Migration

import { Form, A2InputFieldState } from "@servicetitan/anvil2-ext-common";
import type { SelectFieldOption } from "@servicetitan/anvil2/beta";

const fruit = new A2InputFieldState<SelectFieldOption | null>(null);

<Form.Select fieldState={fruit} label="Fruit" loadOptions={loadOptions} />;

import {
  Form,
  SelectableOptionsFieldState,
} from "@servicetitan/anvil2-ext-common";
import type { SelectFieldOption } from "@servicetitan/anvil2/beta";

const fruit = new SelectableOptionsFieldState<SelectFieldOption>(null);

<Form.Select fieldState={fruit} label="Fruit" loadOptions={loadOptions} />;

import { Form, A2InputFieldState } from "@servicetitan/anvil2-ext-common";

const options = [
  { id: "email", label: "Email" },
  { id: "phone", label: "Phone" },
];
const contactType = new A2InputFieldState(null);

<Form.SelectSync
  fieldState={contactType}
  label="Contact type"
  options={options}
/>;

import {
  Form,
  SelectableOptionsFieldState,
} from "@servicetitan/anvil2-ext-common";

const options = [
  { id: "email", label: "Email" },
  { id: "phone", label: "Phone" },
];
const contactType = new SelectableOptionsFieldState<(typeof options)[number]>(
  null,
);
contactType.setOptions(options);

<Form.SelectSync fieldState={contactType} label="Contact type" />;

import {
  Form,
  SelectableOptionsArrayFieldState,
} from "@servicetitan/anvil2-ext-common";

const items = [
  { id: 1, label: "Email" },
  { id: 2, label: "SMS" },
];

// Value was the selected id(s)
const channels = new SelectableOptionsArrayFieldState<
  number,
  (typeof items)[number]
>([]);

// Reading the value
console.log(channels.value); // [1, 2] — array of ids

import {
  Form,
  SelectableOptionsArrayFieldState,
} from "@servicetitan/anvil2-ext-common";

const items = [
  { id: 1, label: "Email" },
  { id: 2, label: "SMS" },
];

// Value is now the full option object(s)
const channels = new SelectableOptionsArrayFieldState<(typeof items)[number]>(
  [],
);

// Reading the value
console.log(channels.value); // [{ id: 1, label: "Email" }, { id: 2, label: "SMS" }] — array of option objects

import {
  SelectableOptionsFieldState,
  SelectableOptionsArrayFieldState,
} from "@servicetitan/anvil2-ext-common";

type Option = { id: number; label: string };

// Two generics: value type, then option type
const single = new SelectableOptionsFieldState<number, Option>(
  undefined as never,
);
const multi = new SelectableOptionsArrayFieldState<number, Option>([]);

import {
  SelectableOptionsFieldState,
  SelectableOptionsArrayFieldState,
} from "@servicetitan/anvil2-ext-common";

type Option = { id: number; label: string };

// Single generic: the option type (value type is inferred)
const single = new SelectableOptionsFieldState<Option>(null);
const multi = new SelectableOptionsArrayFieldState<Option>([]);