Radio

The radio field is like a Select, but it shows every option at once as radio buttons instead of a dropdown. Reach for it when the set of choices is small — three or four — and you want editors to see every option without opening a menu. For longer lists, prefer a Select; for a simple on/off choice, use a Boolean.

defineRadioField({
  name: 'layout',
  label: 'Layout',
  options: [
    { label: 'Standard', value: 'standard' },
    { label: 'Wide', value: 'wide' },
  ],
})

Options work the same as a Select: { label, value } pairs, or plain strings that stand in for both. Use admin.direction to control whether the buttons sit in a row or stack vertically:

defineRadioField({
  name: 'layout',
  label: 'Layout',
  options: [
    { label: 'Standard', value: 'standard' },
    { label: 'Wide', value: 'wide' },
  ],
  admin: { direction: 'vertical' },
})

Showing the value as a colored badge

Like Select, a radio field can render its chosen value as a colored badge in the admin list. Set admin.format to a badge and map each value to a semantic tone:

defineRadioField({
  name: 'priority',
  label: 'Priority',
  options: [
    { label: 'Low', value: 'low' },
    { label: 'High', value: 'high' },
  ],
  admin: {
    format: { type: 'badge', tones: { low: 'neutral', high: 'danger' } },
  },
})

Tones are neutral, primary, success, warning, danger, or info. Use labels to override the badge text per value and defaultTone for anything unlisted. See Select for the full breakdown — it works identically here. 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";

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;
    };

RadioField

A single choice shown as radio buttons, stored as the chosen value.

export type RadioField = TypedField<"radio", string, RadioFieldAdmin>;

RadioFieldAdmin

Exported type from @dyrected/core.

export type RadioFieldAdmin = {
  /** Radio group orientation. */
  direction?: "horizontal" | "vertical";
  /** How the value is displayed in read-only Admin surfaces. Does not affect storage or editing. */
  format?: OptionFormat;
  hooks?: {
    /** Client-side option recalculation for dependent radio groups. */
    options?: FieldAdminOptionsHook;
  };
};