Form fields

Checkbox field

The CheckboxField component is a wrapper for the Checkbox component.

<CheckboxField field="myCheckboxField" label="Checkbox field" />

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
defaultValue	Scalar The default value of the field.
format	undefined | (value: Scalar ) => ReactNode A function that formats the value as a ReactNode. The function is called with the value as the first argument.
isNonbearing	undefined | boolean If true, the field is non-bearing.
key	undefined | Key | null The key of the field. If the key is not specified, the key is generated from the field name.
onBeforeUpdate	undefined | (value: Scala}) => Scalar A function that is called before the value is updated.
onInitialize	undefined | (value: Scalar) => Scalar A function that is called when the field is initialized.
onUpdate	undefined | (value: Scalar) => Scalar A function that is called when the value is updated.

Date field

The DateField component renders date input for editing date.

Component

<DateField field="birthday" label="Birthday" />

API schema

export class User {
  birthday = def.dateColumn()
}

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

Date time field

The DateTimeField component renders a date&time field for editing date and time.

Component

<DateTimeField field="startAt" label="Event start" />

API schema

export class Event {
  startAt = def.dateTimeColumn()
}

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

Field

The Field components renders value of the field.

<Field field="myField" />

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
defaultValue	Scalar The default value of the field.
format	undefined | (value: Scalar ) => ReactNode A function that formats the value as a ReactNode. The function is called with the value as the first argument.
isNonbearing	undefined | boolean If true, the field is non-bearing.
key	undefined | Key | null The key of the field. If the key is not specified, the key is generated from the field name.
onBeforeUpdate	undefined | (value: Scala}) => Scalar A function that is called before the value is updated.
onInitialize	undefined | (value: Scalar) => Scalar A function that is called when the field is initialized.
onUpdate	undefined | (value: Scalar) => Scalar A function that is called when the value is updated.

MultiSelect 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

Rich text field

The RichTextField component renders a rich text field. The text field is used for rich text editing.

Component - simple

<RichTextField field="content" label="Content" />

Component - advanced

<RichTextField
  field="content"
  label="Content"
  inlineButtons={[
    [
      RichEditor.buttons.italic,
      RichEditor.buttons.underline,
      RichEditor.buttons.strikeThrough,
    ],
  ]}
/>

Component displays only italic, underline and strike through buttons in format text option.

API schema

export class Article {
  content = 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
inlineButtons	undefined | ToolbarButtonSpec[] | ToolbarButtonSpec[][] Buttons to be displayed in the inline toolbar.

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.

Text area field

The TextAreaField component renders a text area field. The text field is used for basic string editing and has no rich text editing capabilities.

<TextAreaField field="content" label="Content" />

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

Text field

The TextField component renders a text field. The text field is used for basic string editing and has no rich text editing capabilities.

Component - simple

<TextField field="name" label="Name" />

Component - advanced

<TextField 
  field="name" 
  label="Name" 
  allowNewlines={true}
/>

API schema

export class Author {
  name = 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
about	undefined | string A description of the field. The description is displayed in the tooltip.
accessKey	undefined | string The access key of the field used to setup keyboard shortcut for the field. More info: MDN Access Key
autoFocus	boolean Whether the field should be focused on mount. The last field with autoFocus property set to true will be focused, If there are multiple ones.
allowNewlines	undefined | boolean If true, the field allows newlines.
description	ReactNode The description for the field.