# Secure String Input

![SecureApp-SecureString-Input.png](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-5aace90ef8fc1fad88e18ff457f42840b660decc%2Fsecure-text-input-web-control-v184-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/data-operation-overview/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.

## Properties

### General

#### Placeholder Text

Expects type `text`.

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

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

For more on how to use the Input ID, see [Connecting Labels to Input Controls](../building-apps/accessibility/connecting-labels-to-input-controls).

### Data Binding

#### Value

Expects type `text`.

By default, a Variable of type Text 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.

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

### Autocomplete

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

### Input Format

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

#### Maximum Length

Expects type `number`.

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

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

Defers displaying the **Prefix** until there is a value in the field or the field is being edited.

#### Raw Value Trim Prefix

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

### Icon

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

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

## Style

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](../styling/styling-overview/web-control-styling-properties) 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.

## 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://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-5aace90ef8fc1fad88e18ff457f42840b660decc%2Fsecure-text-input-web-control-v184-0.png?alt=media)
