> ## Documentation Index
> Fetch the complete documentation index at: https://docs.farmtrace.co.za/llms.txt
> Use this file to discover all available pages before exploring further.

# Component types

> Choose the supported Dsync component type for each function form field.

Each object in a form's `components` array must use a `compType` value. The value is case-insensitive, but the spellings below are the supported type names. Configure the remaining keys with the [component field reference](/dsync/function-setup/component-fields).

## Supported types

| `compType`         | Renders                                                | Typical setup                                                                                     |
| ------------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| `displaycomponent` | Read-only display text.                                | Use `dispMessage` or a calculated `defaultValue`.                                                 |
| `customdropdown`   | A selectable list from the component's own dataset.    | Use `dataset` with `{ "value": "...", "id": "..." }` objects.                                     |
| `dropdown`         | A single selection from a downloaded reference table.  | Use `refTable`, `displayCol`, and `postValueCol`. The selected ID is posted.                      |
| `multi-reference`  | Multiple selections from a downloaded reference table. | Use the same reference fields as `dropdown`; configure `linkTable` for related rows.              |
| `smartscan`        | Barcode scan that resolves a reference.                | Use `refTable`, `displayCol`, `postValueCol`, `barcodeTable`, and `barcodeCol`.                   |
| `facialsmartscan`  | Facial match that resolves a reference.                | Use the reference fields and enable the account's facial recognition capability.                  |
| `numericinput`     | Numeric text input.                                    | Use `minValue`/`maxValue` only when the workflow needs numeric validation or display limits.      |
| `textinput`        | Text input.                                            | Use `dispMessage`, `componentHintText`, and `isMultiLine` as needed.                              |
| `datepicker`       | Date picker.                                           | Use `postTargetCol` and an optional `defaultValue`.                                               |
| `timedatepicker`   | Date and time picker.                                  | Use `postTargetCol` and an optional `defaultValue`.                                               |
| `timepicker`       | Time picker.                                           | Use `postTargetCol` and an optional `defaultValue`.                                               |
| `scaneditable`     | Scan-capable editable text input.                      | Use `postTargetCol`; keep `fbRegex` only when the scan flow needs validation or visibility rules. |
| `scanreadonly`     | Scan-populated read-only text input.                   | Use `postTargetCol` and, when needed, `displayCol`/`postValueCol` for the resolved value.         |
| `device`           | Device operation input/status field.                   | Use `deviceOperationName` or `deviceOperations` and a device ID.                                  |
| `line-item`        | Read-only line-item summary.                           | Use `postValueCol` for the line-item JSON and the form's line-item flow.                          |
| `checkbox`         | Boolean checkbox.                                      | Use `postTargetCol`; the submitted value is `true` or `false`.                                    |
| `signature`        | Signature image field.                                 | Use `postTargetCol`; the submitted value is the captured image name.                              |
| `photo`            | Photo image field.                                     | Use `postTargetCol`; the submitted value is the captured image name.                              |
| `numberpicker`     | Bounded number picker.                                 | Set numeric `minValue` and `maxValue`.                                                            |

<Warning>
  A missing or unknown `compType` falls back to `textinput`. Treat an unexpected text field as a configuration error and check the spelling before publishing.
</Warning>

## Reference-backed components

`dropdown`, `multi-reference`, `smartscan`, and `facialsmartscan` read rows from the locally downloaded table named by `refTable`.

For each reference row:

* `displayCol` supplies the label shown to the user.
* `postValueCol` supplies the ID or value returned by a selection or match.
* `postTargetCol` names the column in the submitted record.
* `filterTable`, `filterRefCol`, and the related filter keys restrict the available rows.

The regular reference list is alphabetically sorted unless `useViewSort` is `true`. A `customdropdown` uses its `dataset` instead and sorts it when `sortAsc` is `true`.

## Examples

### Reference dropdown

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "compType": "dropdown",
  "dispMessage": "Select worker",
  "postTargetCol": "Worker",
  "refTable": "Workers",
  "displayCol": "Name",
  "postValueCol": "Id",
  "required": true
}
```

### Custom dropdown

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "compType": "customdropdown",
  "dispMessage": "Select priority",
  "postTargetCol": "Priority",
  "dataset": [
    { "value": "Low", "id": "low" },
    { "value": "High", "id": "high" }
  ],
  "sortAsc": true
}
```

### Smart scan

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "compType": "smartscan",
  "dispMessage": "Scan asset",
  "postTargetCol": "Asset",
  "refTable": "Assets",
  "displayCol": "Name",
  "postValueCol": "Id",
  "barcodeTable": "Barcode",
  "barcodeCol": "Barcode",
  "required": true
}
```

## Continue

* [Form fields](/dsync/function-setup/form-fields)
* [Component fields](/dsync/function-setup/component-fields)