SelectNumber

The SelectNumber type generates a simple select field, which only allows numbers / integers.

Settings

Name	Type	Default	Required
default	integer
items	array

default

Type: integer

Default value set if a new record is created.

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: 1
  - label: 'The second'
    value: 2
  - label: 'The third'
    value: 3

Tip

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

items:
  - value: 1
  - value: 2
  - value: 3

Tip

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

items:
  - value: 1
    icon: content-beside-text-img-left
  - value: 2
    icon: content-beside-text-img-right
  - value: 3
    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.1.label">
        <source>Label for item with value one</source>
    </trans-unit>
    <trans-unit id="FIELD_IDENTIFIER.items.2.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>
</body>

Example

Minimal

name: example/select-number
fields:
  - identifier: select_number
    type: SelectNumber
    items:
      - label: 'The first'
        value: 1
      - label: 'The second'
        value: 2

Advanced / use case

Select with icons:

name: example/select-number
fields:
 - identifier: select_number_icons
   type: SelectNumber
   fieldWizard:
     selectIcons:
       disabled: false
   default: 2
   items:
     - label: 'Image beside text (left)'
       value: 1
       icon: content-beside-text-img-left
     - label: 'Image beside text (right)'
       value: 2
       icon: content-beside-text-img-right
     - label: 'Image above text (center)'
       value: 3
       icon: content-beside-text-img-above-cent