Select components

Select field

The SelectField component renders a select field.

Component - simple

<SelectField

field="category"

label="Select category"

options="Category.name"

/>

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();

}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
options	string | { label: ReactNode, value: OptionallyVariableFieldValue, description: ReactNode, searchKeywords: string | undefined }[] The options for the field. You can use query language to filter the entities. Required
renderOption	undefined | (EntityAccessor) => ReactNode A function that is called to render the option.
optionsStaticRender	undefined | ReactElement A function that is called to render static the options.

Multi select field

The MultiSelectField renders a select field with posibility to select multiple options.

Component

<MultiSelectField field="tags" label="Select tags" options="Tag.name" />

API schema

export class Article {

tags = def.manyHasMany(Tag, "articles");

}

export class Tag {

name = def.stringColumn();

articles = def.manyHasManyInverse(Article, "tags");

}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
options	string | { label: ReactNode, value: OptionallyVariableFieldValue, description: ReactNode, searchKeywords: string | undefined }[] The options for the field. You can use query language to filter the entities. Required