Multi Select

The multi-select field stores an array of values chosen from a set of options — think tags, categories, or feature flags where more than one choice applies. It works like Select, but editors can pick many options instead of one, and the stored value is an array.

Provide options as a static list, or generate them on the server or in the admin UI the same way you would for a select. See Select for the option formats and dynamic-option patterns, which apply here too.

defineMultiSelectField({
  name: 'tags',
  label: 'Tags',
  options: [
    { label: 'News', value: 'news' },
    { label: 'Tutorial', value: 'tutorial' },
  ],
})

Showing values as colored badges

Set admin.format to a badge and each selected value renders as its own colored pill in the admin list — the same option formatting as Select, applied to every value in the array:

defineMultiSelectField({
  name: 'tags',
  label: 'Tags',
  options: [
    { label: 'News', value: 'news' },
    { label: 'Tutorial', value: 'tutorial' },
    { label: 'Release', value: 'release' },
  ],
  admin: {
    format: { type: 'badge', tones: { release: 'success', news: 'info' } },
  },
})

Tones, labels, and defaultTone behave exactly as they do for Select. The list shows the first few badges and a +N more hint when a document has many values, so a long tag list stays readable. Formatting is display-only.

Generated reference

The contract below is generated from the public @dyrected/core exports by @dyrected/knowledge, so it stays in sync with the package. See Fields for the shared field options every type accepts.

DisplayTone

A semantic color for a badge or status pill in the Admin UI. The Admin panel maps each tone to a themed color, so you pick meaning (success, danger) rather than a raw color and it stays consistent in light and dark mode.

export type DisplayTone =
  "neutral" | "primary" | "success" | "warning" | "danger" | "info";

MultiSelectField

Several choices from a fixed or dynamically-resolved set, stored as an array of the chosen values.

export type MultiSelectField = TypedField<
  "multiSelect",
  string[],
  MultiSelectFieldAdmin
>;

MultiSelectFieldAdmin

Exported type from @dyrected/core.

export type MultiSelectFieldAdmin = {
  /** How each selected value is displayed in read-only Admin surfaces. Does not affect storage or editing. */
  format?: OptionFormat;
  hooks?: {
    /** Client-side option recalculation for dependent multi-select fields. */
    options?: FieldAdminOptionsHook;
  };
};

OptionFormat

How a select, radio, or multiSelect value is presented in read-only Admin surfaces (list cells). Renders the chosen option as a colored badge — ideal for statuses like draft/published. Display only and JSON-serializable so it round-trips through Dyrected Cloud.

Pass the shorthand "badge" for neutral badges, or an object to color and relabel each value.

export type OptionFormat =
  /** Shorthand for `{ type: "badge" }` — every value renders as a neutral badge. */
  | "badge"
  | {
      type: "badge";
      /** Maps an option value to a color tone. Values not listed use `defaultTone`. */
      tones?: Record<string, DisplayTone>;
      /** Overrides the displayed text per option value. Falls back to the option's label. */
      labels?: Record<string, string>;
      /** Tone for values missing from `tones`. Defaults to `"neutral"`. */
      defaultTone?: DisplayTone;
    };