# Signature Input

![organizing info](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-b41fd3a6c8de52d8ad9b0a6a3b0252259361448a%2Fsignature-control-v183-0.png?alt=media)

The Signature Input Web Control collects a user-drawn signature. It is also possible to gather a typed signature with this control.

> 📘 **Note**: the Asset that automatically stores the entered signature will be available throughout the duration of a user's [Journey](https://docs.airkit.ai/?q=the-journey-builder) but not beyond.

## Properties

### Data Binding

#### Value

Expects type `asset`.

It is an asset variable where the signature image will be stored.

**Data stored when user inputs a signature**

```json
{
  "id": "",
  "hash": "",
  "size": 3528,
  "type": "image/png",
  "scope": "SESSION",
  "state": "ACTIVE",
  "region": "",
  "version": 0,
  "assetKey": "",
  "hashType": "",
  "extraInfo": {},
  "expiration": "",
  "visibility": "PRIVATE",
  "createdTime": "2022-11-08T16:04:49.823Z",
  "deletedTime": null,
  "description": null,
  "displayName": "signature.png",
  "downloadUrl": "",
  "modifiedTime": "2022-11-08T16:04:51.236Z",
  "storageClass": "v1",
  "thumbnailUrl": "",
  "organizationId": "",
  "validationErrors": null
}
```

#### Data Tag

Assigns a data tag on the value of the control. For more information, see [Data Masking and Auditing](https://support.airkit.com/v18.3/docs/data-masking-and-auditing).

### Input Format

#### Init Mode

The initial mode in which the control should be presented. Options are:

* **draw** - finger drawn signature
* **type** - typed signature

**Signature**

Expects type `text`.

A [Text Variable Data Type](../variable-data-types/the-text-variable-data-type) will hold the typed version of the signature.

#### Left Margin Typed Signature

Expects type `number`.

A CSS value for the left margin of the text input in the **type** mode.

#### Top Margin Typed Signature

Expects type `number`.

A CSS value for the top margin of the text input in the **type** mode.

### Accessibility

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### State

**Is Visible**

Expects type `boolean`.

If `TRUE` the control will be visible. If `FALSE` the control will not be displayed. If the field is empty, the control will be visible.

#### Is Disabled

Expects type `boolean`.

If `TRUE` the control will be disabled and the user will not be able to interact with the control. If `FALSE` the control will be enabled. If the field is empty, the control will be enabled.

## Style

Check [Common style properties of web controls](https://github.com/airkit/airkit-docs/blob/master/docs/v18-3/web-control-styling-properties.md) for details on how to style this Web Control.

## Actions

#### Value Changed

This event is run each time the control receives an input.

Metadata about this event can be accessed through the `event` namespace.

## Example #1

To configure a type signature, on the Web Page that will hold the signature input, create two additional variables of type Text: `typed_signature`, where the typed signature value will reside and `mode` , which will contain the current mode of the Signature Input Control. This variable will be used to toggle the appearance of the text input box.

Add the Signature Input to the Web Page. In **Data Binding** , set the Signature value to `typed_signature`.  Next, click the '+' icon next to the Signature Input and add the Text Input to the control.

Change the Data Binding on the Text Input to `typed_signature`. In **State** set the **Is Visible** value to:

```javascript
activity.mode = "type"
```

On **Actions > Value Changed**, set `activity.mode` to `event.mode`. The mode will either be "draw" or "type."

This configuration will allow the user to type in a signature instead of requiring the drawn signature.

## Example #2

The signature control can collect a signature at the end of a legal document.

Add a Signature control to a Web Page. Create an [Asset](../variable-data-types/the-asset-data-type) on the Web Page. On the Signature control, set the **Signature** value to the asset created.

![organizing info](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-7541c802f9b5428c5916f149339f2472c11c8371%2Fsignature-control-v183-1.png?alt=media)
