# MaskedInput

> MaskedInput generates a masked text input.

[API reference](/docs/api/index.md) › [yii](/docs/api/yii/index.md) › [widgets](/docs/api/yii/widgets/index.md) › MaskedInput

| class | `yii\widgets\MaskedInput` |
| --- | --- |
| Extends | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) » [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) » [`yii\base\Component`](/docs/api/yii/base/component/index.md) » [`yii\base\BaseObject`](/docs/api/yii/base/baseobject/index.md) |
| Implements | [`yii\base\ViewContextInterface`](/docs/api/yii/base/viewcontextinterface/index.md), [`yii\base\Configurable`](/docs/api/yii/base/configurable/index.md) |
| Since | 2.0 |
| Source | [`framework/widgets/MaskedInput.php`](https://github.com/yiisoft/yii2/blob/22.0/framework/widgets/MaskedInput.php#L47) |

MaskedInput generates a masked text input.

MaskedInput is similar to [`Html::textInput()`](/docs/api/yii/helpers/basehtml/index.md#method-textInput) except that an input mask will be used to force users to enter
properly formatted data, such as phone numbers, social security numbers.

To use MaskedInput, you must set the [`$mask`](/docs/api/yii/widgets/maskedinput/index.md#property-mask) property. The following example
shows how to use MaskedInput to collect phone numbers:

```
echo MaskedInput::widget([
    'name' => 'phone',
    'mask' => '999-999-9999',
]);
```

You can also use this widget in an [`ActiveForm`](/docs/api/yii/widgets/activeform/index.md) using the [widget()](/docs/api/yii/widgets/activefield/index.md#method-widget)
method, for example like this:

```
<?= $form->field($model, 'from_date')->widget(\yii\widgets\MaskedInput::class, [
    'mask' => '999-999-9999',
]) ?>
```

The masked text field is implemented based on the
[jQuery input masked plugin](https://github.com/RobinHerbots/Inputmask).

## Properties

| Property | Type | Description | Defined by |
| --- | --- | --- | --- |
| [`$aliases`](#property-aliases) | `array\|null` | Custom aliases to use. Default: `null`. | `MaskedInput` |
| <span id="property-attribute"></span>[`$attribute`](/docs/api/yii/widgets/inputwidget/index.md#property-attribute) | `string\|null` | The model attribute that this widget is associated with. Default: `null`. | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) |
| <span id="property-autoIdPrefix"></span>[`$autoIdPrefix`](/docs/api/yii/base/widget/index.md#property-autoIdPrefix) static | `string` | The prefix to the automatically generated widget IDs. Default: `'w'`. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="property-behaviors"></span>[`$behaviors`](/docs/api/yii/base/component/index.md#property-behaviors) read-only | `array<`[`yii\base\Behavior`](/docs/api/yii/base/behavior/index.md)`<static>>` | List of behaviors attached to this component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="property-clientOptions"></span>`$clientOptions` | `array` | The JQuery plugin options for the input mask plugin. Default: `[]`. | `MaskedInput` |
| [`$definitions`](#property-definitions) | `array\|null` | Custom mask definitions to use. Default: `null`. | `MaskedInput` |
| <span id="property-field"></span>[`$field`](/docs/api/yii/widgets/inputwidget/index.md#property-field) | [`ActiveField`](/docs/api/yii/widgets/activefield/index.md) | Active input field, which triggers this widget rendering. Default: `null`. Available since 2.0.11. | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) |
| <span id="property-id"></span>[`$id`](/docs/api/yii/base/widget/index.md#property-id) | `string` | Id of the widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| [`$mask`](#property-mask) | `string\|array\|`[`yii\web\JsExpression`](/docs/api/yii/web/jsexpression/index.md) | The input mask (e.g. '99/99/9999' for date input). Default: `null`. | `MaskedInput` |
| <span id="property-model"></span>[`$model`](/docs/api/yii/widgets/inputwidget/index.md#property-model) | [`yii\base\Model`](/docs/api/yii/base/model/index.md)`\|null` | The data model that this widget is associated with. Default: `null`. | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) |
| <span id="property-name"></span>[`$name`](/docs/api/yii/widgets/inputwidget/index.md#property-name) | `string\|null` | The input name. Default: `null`. | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) |
| <span id="property-options"></span>`$options` | `array` | The HTML attributes for the input tag. Default: `['class' => 'form-control']`. | `MaskedInput` |
| [`$type`](#property-type) | `string` | The type of the input tag. Default: `'text'`. Available since 2.0.6. | `MaskedInput` |
| <span id="property-value"></span>[`$value`](/docs/api/yii/widgets/inputwidget/index.md#property-value) | `string` | The input value. Default: `null`. | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) |
| <span id="property-view"></span>[`$view`](/docs/api/yii/base/widget/index.md#property-view) | [`yii\web\View`](/docs/api/yii/web/view/index.md) | The view object that can be used to render views or view files. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="property-viewPath"></span>[`$viewPath`](/docs/api/yii/base/widget/index.md#property-viewPath) read-only | `string` | The directory containing the view files for this widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="property-_hashVar"></span>`$_hashVar` protected | `string\|null` | The hashed variable to store the pluginOptions Default: `null`. | `MaskedInput` |
| <span id="property-_jsCallbacks"></span>`$_jsCallbacks` protected | `string[]` | The inputmask properties can be contained callbacks Default: `['oncomplete', 'onincomplete', 'oncleared', 'onKeyDown', 'onBeforeMask', 'onBeforePaste', 'onBeforeWrite', 'onUnMask', 'onKeyValidation', 'isComplete', 'preValidation', 'postValidation', 'canClearPosition']`. | `MaskedInput` |

## Methods

| Method | Description | Defined by |
| --- | --- | --- |
| <span id="method-__construct"></span>[`__construct()`](/docs/api/yii/base/baseobject/index.md#method-__construct) | Constructor. | [`yii\base\BaseObject`](/docs/api/yii/base/baseobject/index.md) |
| <span id="method-__call"></span>[`__call()`](/docs/api/yii/base/component/index.md#method-__call) | Calls the named method which is not a class method. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-__clone"></span>[`__clone()`](/docs/api/yii/base/component/index.md#method-__clone) | This method is called after the object is created by cloning an existing one. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-__get"></span>[`__get()`](/docs/api/yii/base/component/index.md#method-__get) | Returns the value of a component property. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-__isset"></span>[`__isset()`](/docs/api/yii/base/component/index.md#method-__isset) | Checks if a property is set, i.e. defined and not null. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-__set"></span>[`__set()`](/docs/api/yii/base/component/index.md#method-__set) | Sets the value of a component property. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-__unset"></span>[`__unset()`](/docs/api/yii/base/component/index.md#method-__unset) | Sets a component property to be null. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-afterRun"></span>[`afterRun()`](/docs/api/yii/base/widget/index.md#method-afterRun) | This method is invoked right after a widget is executed. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-attachBehavior"></span>[`attachBehavior()`](/docs/api/yii/base/component/index.md#method-attachBehavior) | Attaches a behavior to this component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-attachBehaviors"></span>[`attachBehaviors()`](/docs/api/yii/base/component/index.md#method-attachBehaviors) | Attaches a list of behaviors to the component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-beforeRun"></span>[`beforeRun()`](/docs/api/yii/base/widget/index.md#method-beforeRun) | This method is invoked right before the widget is executed. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-begin"></span>[`begin()`](/docs/api/yii/base/widget/index.md#method-begin) static | Begins a widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-behaviors"></span>[`behaviors()`](/docs/api/yii/base/component/index.md#method-behaviors) | Returns a list of behaviors that this component should behave as. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-canGetProperty"></span>[`canGetProperty()`](/docs/api/yii/base/component/index.md#method-canGetProperty) | Returns a value indicating whether a property can be read. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-canSetProperty"></span>[`canSetProperty()`](/docs/api/yii/base/component/index.md#method-canSetProperty) | Returns a value indicating whether a property can be set. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-className"></span>[`className()`](/docs/api/yii/base/baseobject/index.md#method-className) static | Returns the fully qualified name of this class. | [`yii\base\BaseObject`](/docs/api/yii/base/baseobject/index.md) |
| <span id="method-detachBehavior"></span>[`detachBehavior()`](/docs/api/yii/base/component/index.md#method-detachBehavior) | Detaches a behavior from the component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-detachBehaviors"></span>[`detachBehaviors()`](/docs/api/yii/base/component/index.md#method-detachBehaviors) | Detaches all behaviors from the component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-end"></span>[`end()`](/docs/api/yii/base/widget/index.md#method-end) static | Ends a widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-ensureBehaviors"></span>[`ensureBehaviors()`](/docs/api/yii/base/component/index.md#method-ensureBehaviors) | Makes sure that the behaviors declared in [`behaviors()`](/docs/api/yii/base/component/index.md#method-behaviors) are attached to this component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-getBehavior"></span>[`getBehavior()`](/docs/api/yii/base/component/index.md#method-getBehavior) | Returns the named behavior object. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-getBehaviors"></span>[`getBehaviors()`](/docs/api/yii/base/component/index.md#method-getBehaviors) | Returns all behaviors attached to this component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-getId"></span>[`getId()`](/docs/api/yii/base/widget/index.md#method-getId) | Returns the ID of the widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-getView"></span>[`getView()`](/docs/api/yii/base/widget/index.md#method-getView) | Returns the view object that can be used to render views or view files. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-getViewPath"></span>[`getViewPath()`](/docs/api/yii/base/widget/index.md#method-getViewPath) | Returns the directory containing the view files for this widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-hasEventHandlers"></span>[`hasEventHandlers()`](/docs/api/yii/base/component/index.md#method-hasEventHandlers) | Returns a value indicating whether there is any handler attached to the named event. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-hasMethod"></span>[`hasMethod()`](/docs/api/yii/base/component/index.md#method-hasMethod) | Returns a value indicating whether a method is defined. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-hasProperty"></span>[`hasProperty()`](/docs/api/yii/base/component/index.md#method-hasProperty) | Returns a value indicating whether a property is defined for this component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| [`init()`](#method-init) | Initializes the widget. | `MaskedInput` |
| <span id="method-off"></span>[`off()`](/docs/api/yii/base/component/index.md#method-off) | Detaches an existing event handler from this component. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-on"></span>[`on()`](/docs/api/yii/base/component/index.md#method-on) | Attaches an event handler to an event. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| [`registerClientScript()`](#method-registerClientScript) | Registers the needed client script and options. | `MaskedInput` |
| <span id="method-render"></span>[`render()`](/docs/api/yii/base/widget/index.md#method-render) | Renders a view. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-renderFile"></span>[`renderFile()`](/docs/api/yii/base/widget/index.md#method-renderFile) | Renders a view file. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| [`run()`](#method-run) | Executes the widget. | `MaskedInput` |
| <span id="method-setId"></span>[`setId()`](/docs/api/yii/base/widget/index.md#method-setId) | Sets the ID of the widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-setView"></span>[`setView()`](/docs/api/yii/base/widget/index.md#method-setView) | Sets the view object to be used by this widget. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="method-trigger"></span>[`trigger()`](/docs/api/yii/base/component/index.md#method-trigger) | Triggers an event. | [`yii\base\Component`](/docs/api/yii/base/component/index.md) |
| <span id="method-widget"></span>[`widget()`](/docs/api/yii/base/widget/index.md#method-widget) static | Creates a widget instance and runs it. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| [`hashPluginOptions()`](#method-hashPluginOptions) protected | Generates a hashed variable to store the plugin `clientOptions`. | `MaskedInput` |
| <span id="method-hasModel"></span>[`hasModel()`](/docs/api/yii/widgets/inputwidget/index.md#method-hasModel) protected |  | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) |
| [`initClientOptions()`](#method-initClientOptions) protected | Initializes client options. | `MaskedInput` |
| <span id="method-renderInputHtml"></span>[`renderInputHtml()`](/docs/api/yii/widgets/inputwidget/index.md#method-renderInputHtml) protected | Render a HTML input tag. | [`InputWidget`](/docs/api/yii/widgets/inputwidget/index.md) |

## Events

| Event | Type | Description | Defined by |
| --- | --- | --- | --- |
| <span id="event-EVENT_INIT"></span>[`EVENT_INIT`](/docs/api/yii/base/widget/index.md#event-EVENT_INIT) | [`yii\base\Event`](/docs/api/yii/base/event/index.md) | An event that is triggered when the widget is initialized via [`init()`](/docs/api/yii/base/widget/index.md#method-init). Event name: `'init'`. Available since 2.0.11. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="event-EVENT_BEFORE_RUN"></span>[`EVENT_BEFORE_RUN`](/docs/api/yii/base/widget/index.md#event-EVENT_BEFORE_RUN) | [`yii\base\WidgetEvent`](/docs/api/yii/base/widgetevent/index.md) | An event raised right before executing a widget. Event name: `'beforeRun'`. Available since 2.0.11. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |
| <span id="event-EVENT_AFTER_RUN"></span>[`EVENT_AFTER_RUN`](/docs/api/yii/base/widget/index.md#event-EVENT_AFTER_RUN) | [`yii\base\WidgetEvent`](/docs/api/yii/base/widgetevent/index.md) | An event raised right after executing a widget. Event name: `'afterRun'`. Available since 2.0.11. | [`yii\base\Widget`](/docs/api/yii/base/widget/index.md) |

## Constants

| Constant | Value | Description | Defined by |
| --- | --- | --- | --- |
| <span id="const-PLUGIN_NAME"></span>`PLUGIN_NAME` | `'inputmask'` | The name of the jQuery plugin to use for this widget. | `MaskedInput` |

## Property details

### $aliases <span id="property-aliases"></span>

```php
public array|null $aliases = null
```

Custom aliases to use.

Should be configured as `maskAlias => settings`, where

- `maskAlias` is a string containing a text to identify your mask alias definition (e.g. 'phone') and
- `settings` is an array containing settings for the mask symbol, exactly similar to parameters as passed in [`$clientOptions`](/docs/api/yii/widgets/maskedinput/index.md#property-clientOptions).

### $definitions <span id="property-definitions"></span>

```php
public array|null $definitions = null
```

Custom mask definitions to use.

Should be configured as `maskSymbol => settings`, where

- `maskSymbol` is a string, containing a character to identify your mask definition and
- `settings` is an array, consisting of the following entries:
  - `validator`: string, a JS regular expression or a JS function.
  - `cardinality`: int, specifies how many characters are represented and validated for the definition.
  - `prevalidator`: array, validate the characters before the definition cardinality is reached.
  - `definitionSymbol`: string, allows shifting values from other definitions, with this `definitionSymbol`.

### $mask <span id="property-mask"></span>

```php
public string|array|yii\web\JsExpression $mask = null
```

The input mask (e.g. '99/99/9999' for date input).

The following characters
can be used in the mask and are predefined:

- `a`: represents an alpha character (A-Z, a-z)
- `9`: represents a numeric character (0-9)
- `*`: represents an alphanumeric character (A-Z, a-z, 0-9)
- `[` and `]`: anything entered between the square brackets is considered optional user input. This is
  based on the `optionalmarker` setting in [`$clientOptions`](/docs/api/yii/widgets/maskedinput/index.md#property-clientOptions).

Additional definitions can be set through the [`$definitions`](/docs/api/yii/widgets/maskedinput/index.md#property-definitions) property.

### $type <span id="property-type"></span>

```php
public string $type = 'text'
```

The type of the input tag.

Currently only 'text' and 'tel' are supported.

**Since**

2.0.6

## Method details

### init() <span id="method-init"></span>

```php
public function init(): mixed
```

Initializes the widget.

**Returns**

`mixed`

**Throws**

- [`yii\base\InvalidConfigException`](/docs/api/yii/base/invalidconfigexception/index.md): if the "mask" property is not set.

### registerClientScript() <span id="method-registerClientScript"></span>

```php
public function registerClientScript(): mixed
```

Registers the needed client script and options.

**Returns**

`mixed`

### run() <span id="method-run"></span>

```php
public function run(): string|void
```

Executes the widget.

**Returns**

`string|void`: The rendering result may be directly "echoed" or returned as a string

### hashPluginOptions() <span id="method-hashPluginOptions"></span>

```php
protected function hashPluginOptions(yii\web\View $view): mixed
```

Generates a hashed variable to store the plugin `clientOptions`.

Helps in reusing the variable for similar
options passed for other widgets on the same page. The following special data attribute will also be
added to the input field to allow accessing the client options via javascript:

- 'data-plugin-inputmask' will store the hashed variable storing the plugin options.

**Parameters**

| Parameter | Type | Description |
| --- | --- | --- |
| `$view` | [`yii\web\View`](/docs/api/yii/web/view/index.md) | The view instance |

**Returns**

`mixed`

### initClientOptions() <span id="method-initClientOptions"></span>

```php
protected function initClientOptions(): mixed
```

Initializes client options.

**Returns**

`mixed`