# Secure String Input

![SecureApp-SecureString-Input.png](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-5aace90ef8fc1fad88e18ff457f42840b660decc%2Fsecure-text-input-web-control-v182-0.png?alt=media)

The Secure Text Input Web Control collects information from a user kept in a secure source. The client-side code cannot access this data. To retrieve the data, you must use the [Secure Value Retrieval](../data-operations/the-secure-value-retrieval-data-operation) Data Operation and pass the `SecureKey`. The Secure Text Input is ideal for collecting sensitive user information like Social Security Numbers or Credit Card Information. Using this control prevents the front-end environment from having access to the value the user has entered.

## General

### Control Properties

#### Placeholder Text

Expects type `text`.

Text to be displayed in the text input until the user enters the box.

#### 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).

### Advanced Control Properties

#### Input ID

Expects type `text`.

The Input ID assigned to the Secure String Input Web Control. This Input ID can tied to a [Label](label-web-control) so that clicking on the associated Label will allow users to enter a Secure String.

#### Maximum Length

Expects type `number`.

Determines the maximum number of characters that the input will allow.

#### Expiration Duration

Expects type `number`.

Determines for how long the secure string will be available. Options are:

* Day(s)
* Hour(s)
* Day(s)

> 📘 **Maximum configurable duration is 7 days.**

#### Input Mode

Determines the mode of the keyboard for a mobile device.

* **text** - (default) allows all text from a standard keyboard.
* **decimal** - allows for numbers with decimals to be entered.
* **numeric**- allows for numbers to be entered.
* **tel**- for inputting telephone numbers.
* **search**- for search inputs, the enter button the keyboard will change to "search"
* **email** - for email addresses
* **URL** - for entering a web URL.

#### Format

Determines how the text will be rendered. For example, selecting the date format and **dd/mm/yyyy** will cause the input to format a data as "04/04/2044."

#### Delimiter

Separates input values. When a user enters this character or sequence of characters, into the secure input, it will be ignored.

#### Prefix

Expects type `string`.

Sets a value that is displayed as a placeholder and is affixed to the beginning of the value. This value is stored as part of the input the user enters by default.

#### No Immediate Prefix

If checked, the prefix will not be a part of the input until the user enters a character into the input.

#### Raw Value Trim Prefix

If checked, the prefix will be trimmed from the value stored in the secure string output.

#### Right Icon

Displays the icon at the right of the input. Default is `password-visibility`. If another icon is chosen, the user won't be able to toggle between hidden and shown visibility.

#### AutoComplete

Determines the autocomplete mode for the input. Check out [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more details on what options are available.

### Data Binding

#### Selected

Expects type `text`.

By default, a Variable of type [Text](../variable-data-types/the-text-variable-data-type) is generated at the Web Page level to store the data from the input. Users can also edit the Data Binding property and create their own Variables.

### Style and Layout

This control has styles for the following states:

**Default** - When first rendered without state\
**Focused** - when the Checkbox is focused\
**Disabled** - When the Checkbox is disabled

Check [Common style properties of web controls](web-controls-overview/common-style-properties-of-web-controls) for further details on how to style this Web Control.

## Actions

#### On Blur

Triggers when the user leaves the input field. That is, when changing the focus from the field to some other part of the application.

#### Value Changed

Triggers when a character is added or removed from the Secure Text Input. Because the Secure String does not have a control value binding property, the `event.value` will contain the information needed to retrieve the text entered.

In order to retrieve the `secureValueKey`, set a variable on the Value Change action to

```javascript
event.value
```

#### On Enter

Triggers when the user hits the enter or submit button at the end of the input.

## Advanced

### 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 button will be enabled. If the field is empty, the control will be enabled.

## Example

Insert a Secure Text Input. Map the `event.value` to an activity variable. The Secure String Input can now collect a password to log into an app.

![SecureApp-SecureString-Input.png](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-5aace90ef8fc1fad88e18ff457f42840b660decc%2Fsecure-text-input-web-control-v182-0.png?alt=media)
