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

# Controls

The Forms SDK provides a set of directives which simplify working with process variables in an HTML form.
These directives work on most of the HTML controls and allow users to declaratively fetch variables from the process engine and have their values written to and read from input fields.

<Note>
  If an HTML control is not supported, you need to write [custom JavaScript](/reference/forms/embedded-forms/javascript/lifecycle#implementing-custom-fields).
</Note>

## The `cam-variable-name` Directive

The `cam-variable-name` directive allows providing the name of a process / task / case variable. If the directive is discovered on an HTML control, the value of the variable is fetched from the server and written to the control.

```html theme={null}
<input type="text"
       cam-variable-name="CUSTOMER_ID">
```

## The `cam-business-key` Directive

The `cam-business-key` is aimed to be used on a free text input field in order to define a businessKey at the [start of a process](/reference/rest/process-definition/submit-start-form-2).
This attribute is only relevant when the form is aimed to start a process.

```html theme={null}
<input type="text"
       cam-business-key>
```

See also: [Setting the business key using Javascript](/reference/forms/embedded-forms/javascript/generating-businesskey)

### AngularJS support and `cam-variable-name`

If you use the AngularJS integration, the `cam-variable-name` directive will automatically bind the input to the model in case no binding is provided by the user.

The following two markup examples have the same semantics:

```html theme={null}
<input type="text"
       cam-variable-name="CUSTOMER_ID">
```

is the same as

```html theme={null}
<input type="text"
       cam-variable-name="CUSTOMER_ID"
       ng-model="CUSTOMER_ID">
```

If the user provides a customer `ng-model` binding, it is respected:

```html theme={null}
<input type="text"
       cam-variable-name="CUSTOMER_ID"
       ng-model="customerId">

Current value: {{customerId}}
```

## The `cam-variable-type` Directive

The `cam-variable-type` directive allows specifying the type of a process / task / case variable. This is required if the variable does not yet exist.

The following markup creates a text input field bound to a variable of type `Double`:

```html theme={null}
<input type="text"
       cam-variable-name="INVOICE_AMOUNT"
       cam-variable-type="Double">
```

### Supported Variable Types

See the section on [variable types](/user-guide/process-engine/variables#supported-variable-values) for a list of variable types which are supported out of the box.

### AngularJS Support and `cam-variable-type`

The `cam-variable-type` directive can be used as validation directive:

```html theme={null}
<input type="text"
       name="invoiceAmount"
       cam-variable-name="INVOICE_AMOUNT"
       cam-variable-type="Double">

<span ng-show="myForm.invoiceAmount.$error.camVariableType">
  Input must be a 'Double'.
</span>
```

## In this section

* [**Text Inputs**](/reference/forms/embedded-forms/controls/inputs) — Single-line text fields.
* [**Textareas**](/reference/forms/embedded-forms/controls/textarea) — Multi-line text fields.
* [**Date Inputs**](/reference/forms/embedded-forms/controls/date-inputs) — Date pickers.
* [**Boolean Inputs**](/reference/forms/embedded-forms/controls/boolean-inputs) — Checkboxes.
* [**Selects**](/reference/forms/embedded-forms/controls/select) — Dropdown selects.
* [**Hidden Input Fields**](/reference/forms/embedded-forms/controls/hidden) — Hidden fields.
* [**File Upload and Download**](/reference/forms/embedded-forms/controls/files) — File upload and download controls.
* [**BPMN Event Buttons**](/reference/forms/embedded-forms/controls/bpmn-buttons) — Buttons that trigger BPMN events.