SelectField

Component - simple

<SelectField
  field="category"
  label="Select category"
  options="Category.name"
/>

Component preview

Component - advanced

function customRenderOptions(accessor) {
  const name = accessor.getField("name").value
  const color = accessor.getField("color").value

  return <span style={{ backgroundColor: color }}>{name}</span>
}

<SelectField
  field="category"
  label="Select category"
  options="Category"
  renderOption={customRenderOptions}
  optionsStaticRender={
    <>
      <Field field="name" />
      <Field field="color" />
    </>
  }
/>

API schema

export class Article {
  category = def.manyHasOne(Category);
}

export class Category {
  name = def.stringColumn();
  @validation.assertPattern(/^#[0-9a-fA-F]{6}$/, "Wrong color format. Use HEX (e.g. #000000)")
  color = def.stringColumn();
}