Select

The Select type generates a simple select field.

Settings

Name	Type	Default	Required
renderType	string		true
items	array
default	string
maxitems	integer
minitems	integer
relationship	string	oneToMany
dbFieldLength	int	255
allowedCustomProperties	array	["itemsProcConfig"]

renderType

Type: string
Required: true

selectSingle
selectCheckBox
selectSingleBox
selectTree
selectMultipleSideBySide

items

Type: array

Contains the elements for the selector box. Each item is an array. An item consists of a label and a value.

Example:

items:
  - label: 'The first'
    value: one
  - label: 'The second'
    value: two
  - label: 'The third'
    value: three

Tip

You can omit the label, if you have the translation already in your labels.xlf file.

items:
  - value: one
  - value: two
  - value: three

Tip

You can also use icons so they are displayed in the backend. See Advanced / use case for a full example.

items:
  - value: image-left
    icon: content-beside-text-img-left
  - value: image-right
    icon: content-beside-text-img-right
  - value: image-above
    icon: content-beside-text-img-above-center

For this you need the following setting according to the TCA documentation.

fieldWizard:
  selectIcons:
    disabled: false

XLF translation keys for items have the following convention:

<body>
    <trans-unit id="FIELD_IDENTIFIER.items.one.label">
        <source>Label for item with value one</source>
    </trans-unit>
    <trans-unit id="FIELD_IDENTIFIER.items.two.label">
        <source>Label for item with value two</source>
    </trans-unit>
    <trans-unit id="FIELD_IDENTIFIER.items.VALUE.label">
        <source>Label for item with value VALUE</source>
    </trans-unit>
    <trans-unit id="FIELD_IDENTIFIER.items.label">
        <source>Label for item with empty value</source>
    </trans-unit>
</body>

default

Type: string

Default value set if a new record is created.

maxitems

Type: integer

Maximum number of child items. Defaults to a high value. JavaScript record validation prevents the record from being saved if the limit is not satisfied. If maxitems ist set to greater than 1, multiselect is automatically enabled.

minitems

Type: integer

Minimum number of child items. Defaults to 0. JavaScript record validation prevents the record from being saved if the limit is not satisfied. The field can be set as required by setting minitems to at least 1.

relationship

Type: string
Default: oneToMany

Note

This can only be used in combination with foreign_table.

The relationship defines the cardinality between the relations. Possible values are oneToMany (default), manyToOne and oneToOne. In case of a [x]toOne relation, the processed field will be filled directly with the record instead of a collection of records. In addition, maxitems will be automatically set to 1. If the renderType is set to selectSingle, a relationship manyToOne is automatically inferred.

dbFieldLength

Type: int
Default: 255

This option can be used to set an alternative size for the database varchar column. The default size is 255.

allowedCustomProperties

Type: array
Default: ["itemsProcConfig"]

Sometimes it is needed to provide custom configuration for the itemsProcFunc functionality. These extra properties need to be explicitly allowed via this option. This option receives an array of those strings. By default, the custom option itemsProcConfig is allowed.

Example

Minimal

Select single:

name: example/select
fields:
  - identifier: select
    type: Select
    renderType: selectSingle
    items:
      - label: 'The first'
        value: one
      - label: 'The second'
        value: two

Select multiple:

name: example/select
fields:
  - identifier: select_side_by_side
    type: Select
    renderType: selectMultipleSideBySide
    items:
      - label: 'The first'
        value: one
      - label: 'The second'
        value: two

Advanced / use case

Select single:

name: example/select
fields:
  - identifier: select
    type: Select
    renderType: selectSingle
    default: 'one'
    items:
      - label: 'The first'
        value: one
      - label: 'The second'
        value: two
      - label: 'The third'
        value: three
    foreign_table: pages
    foreign_table_where: 'AND {#pages}.{#pid} = 123 ORDER BY uid'

Select multiple:

name: example/select
fields:
  - identifier: select_side_by_side
    type: Select
    renderType: selectMultipleSideBySide
    default: 'one'
    minitems: 1
    maxitems: 3
    items:
      - label: 'The first'
        value: one
      - label: 'The second'
        value: two
      - label: 'The third'
        value: three
    foreign_table: pages
    foreign_table_where: 'AND {#pages}.{#pid} = 123 ORDER BY uid'

Select tree:

name: example/select
fields:
  - identifier: select_tree
    type: Select
    renderType: selectTree
    size: 5
    foreign_table: 'pages'
    foreign_table_where: 'ORDER BY pages.uid'
    treeConfig:
      parentField: pid

Select with icons:

name: example/select
fields:
  - identifier: select_icons
    type: Select
    renderType: selectSingle
    fieldWizard:
      selectIcons:
        disabled: false
    default: 'image-left'
    items:
      - label: 'Image beside text (left)'
        value: image-left
        icon: content-beside-text-img-left
      - label: 'Image beside text (right)'
        value: image-right
        icon: content-beside-text-img-right
      - label: 'Image above text (center)'
        value: image-above
        icon: content-beside-text-img-above-cent