Update a Dropdown from Another Field

Admin option hooks are ideal for small, non-secret option sets derived from current form values.

Change available Admin UI options immediately when an editor changes a related field.

Use this when

• make one dropdown depend on another
• show states based on the selected country
• create a cascading dropdown
• update select options while editing

Dyrected concepts

admin.hooks.options, select, siblingData

Additional packages: No additional packages.

Complete recipe

This is the canonical source compiled and behavior-tested by @dyrected/knowledge.

import { defineCollection, defineSelectField } from "@dyrected/core";

export const Locations = defineCollection({
  slug: "locations",
  fields: [
    defineSelectField({
      name: "country",
      label: "Country",
      required: true,
      options: [
        { label: "Nigeria", value: "ng" },
        { label: "United States", value: "us" },
      ],
    }),
    defineSelectField({
      name: "region",
      label: "State or region",
      required: true,
      options: [],
      admin: {
        hooks: {
          options: ({ siblingData }) => {
            if (siblingData.country === "ng") return ["Lagos", "Abuja", "Oyo"];
            if (siblingData.country === "us")
              return ["California", "New York", "Texas"];
            return [];
          },
        },
      },
    }),
  ],
});

Decisions and cautions

The browser clears values that are no longer available, but API clients can still submit arbitrary values. Add server validation when the relationship between parent and child options is part of the data contract.

Use a server-side options resolver when choices require database queries, secrets, user-scoped filtering, or shared caching. Do not embed sensitive provider data in an Admin hook.