# Properties

The configuration is divided in four blocks, `config`, `ui`, `schema` & `data` where each block has its own tab below. 

See the **Example** tabs for a full examples.

{% hint style="info" %}
**Control type:** `Input`
{% endhint %}

{% tabs %}
{% tab title="Config" %}

<table><thead><tr><th width="181">Name</th><th width="211">Description</th><th width="145">Default</th><th data-type="checkbox">Mandatory</th></tr></thead><tbody><tr><td><code>required</code></td><td>Must have a value when leaving the step. <code>true</code>/<code>false</code></td><td><code>false</code></td><td>false</td></tr><tr><td><code>readonly</code></td><td>Open to edit by enduser. <code>true</code>/<code>false</code></td><td><code>false</code></td><td>false</td></tr><tr><td><code>type</code></td><td>Type of input value. Valid JSON types are: string, number, integer, boolean.</td><td><code>"string"</code></td><td>false</td></tr></tbody></table>
{% endtab %}

{% tab title="UI" %}

<table><thead><tr><th width="224">Name</th><th width="211">Description</th><th width="145">Default</th><th data-type="checkbox">Mandatory</th></tr></thead><tbody><tr><td><code>ui:size</code></td><td>The size of the component. Full size is 12.</td><td><code>12</code></td><td>false</td></tr></tbody></table>
{% endtab %}

{% tab title="Schema" %}

<table><thead><tr><th width="224">Name</th><th width="211">Description</th><th width="145">Default</th><th data-type="checkbox">Mandatory</th></tr></thead><tbody><tr><td><code>format</code></td><td>Validation of input data.  Valid checks: strict, email, phone, postal.<br>See below for more info.</td><td>N/A</td><td>false</td></tr></tbody></table>
{% endtab %}

{% tab title="Data" %}

<table><thead><tr><th width="224">Name</th><th width="211">Description</th><th width="145">Default</th><th data-type="checkbox">Mandatory</th></tr></thead><tbody><tr><td><code>data</code></td><td>Value to display from session or flow.<br>{{{flow.attribute}}}<br>{{{session.attribute}}}</td><td>N/A</td><td>false</td></tr></tbody></table>
{% endtab %}

{% tab title="Example 1" %}
This is an example from a create step where values ​​are to be added. Mail and mobile have checks for correct syntax.

```json
{
    "id": "sn",
    "type": "Input",
    "ui": {
        "ui:size": {
            "md": 6
        }
    },
    "schema": {
        "format": "strict"
    },
    "config": {
        "type": "string",
        "required": true
    }
},
{
    "id": "mail",
    "type": "Input",
    "ui": {
        "ui:size": {
            "md": 6
        }
    },
    "schema": {
        "format": "email"
    },
    "config": {
        "type": "string",
        "required": true
    }
},
{
    "id": "mobile",
    "type": "Input",
    "ui": {
        "ui:size": {
            "md": 6
        }
    },
    "schema": {
        "format": "phone"
    },
    "config": {
        "type": "string"
    }
}
```

{% endtab %}

{% tab title="Example 2" %}
This is an example from a create step where values ​​are to be added from a session. In this scenario a user has logged in using Swedish BankID.

```json
{
    "id": "givenName",
    "type": "Input",
    "ui": {
        "ui:size": {
            "md": 6
        }
    },
    "data": "{{{session.givenName}}}",
    "config": {
        "readonly": true
    }
}
```

{% endtab %}

{% tab title="Example 3" %}
This is an example from a  step where values ​​are to be added from a previous step or from a pipe in a previous step.

```json
{
    "id": "<enter_unique_id_for_this_control>",
    "type": "Input",
    "data": "{{{flow.givenName}}}",
    "config": {
        "type": "string",
        "required": true
    }
}
```

{% endtab %}
{% endtabs %}

### Special notes for *config.type* and *schema.format* properties

The 'config.type' determines how the control is displayed in the view.&#x20;

For the type 'string' the field can be validated before it is sent to the pipe or next step. The 'strict' validation is recommended as it blocks several common special characters not suitable for Pipe/Valve data handling. Postal is post address.