# InputMask

InputMask component is used to enter input in a certain format such as numeric, date, currency and phone.

## Basic

InputMask is used as a controlled input with v-model property.

```vue
<template>
    <div class="flex justify-center">
        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(null);
<\/script>
```

## Mask

Mask format can be a combination of the following definitions; a for alphabetic characters, 9 for numeric characters and * for alphanumberic characters. In addition, formatting characters like ( , ) , - are also accepted.

```vue
<template>
    <Fluid class="flex flex-wrap gap-4">
        <div class="flex-auto">
            <span class="font-bold block mb-2">SSN</span>
            <InputMask v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
        </div>
        <div class="flex-auto">
            <span class="font-bold block mb-2">Phone</span>
            <InputMask v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
        </div>
        <div class="flex-auto">
            <span class="font-bold block mb-2">Serial Number</span>
            <InputMask v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
        </div>
    </Fluid>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
```

## Optional

When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, ? is used to mark anything after the question mark optional.

```vue
<template>
    <div class="flex justify-center">
        <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('');
<\/script>
```

## SlotChar

Default placeholder for a mask is underscore that can be customized using slotChar property.

```vue
<template>
    <div class="flex justify-center">
        <InputMask v-model="value" placeholder="99/99/9999" mask="99/99/9999" slotChar="mm/dd/yyyy" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('');
<\/script>
```

## Filled

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

```vue
<template>
    <div class="flex justify-center">
        <InputMask v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(null);
<\/script>
```

## Float Label

FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.

```vue
<template>
    <div class="flex flex-wrap justify-center items-end gap-4">
        <FloatLabel>
            <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
            <label for="over_label">Over Label</label>
        </FloatLabel>

        <FloatLabel variant="in">
            <InputMask id="in_label" v-model="value2" mask="999-99-9999" />
            <label for="in_label">In Label</label>
        </FloatLabel>

        <FloatLabel variant="on">
            <InputMask id="on_label" v-model="value3" mask="999-99-9999" />
            <label for="on_label">On Label</label>
        </FloatLabel>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
```

## Ifta Label

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

```vue
<template>
    <div class="flex justify-center">
        <IftaLabel>
            <InputMask id="ssn" v-model="value" mask="999-99-9999" autocomplete="off" />
            <label for="ssn">SSN</label>
        </IftaLabel>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(null);
<\/script>
```

## Sizes

InputMask provides small and large sizes as alternatives to the base.

```vue
<template>
    <div class="flex flex-col items-center gap-4">
        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
```

## Fluid

The fluid prop makes the component take up the full width of its container when set to true.

```vue
<template>
    <InputMask v-model="value" fluid mask="99-999999" placeholder="99-999999" />
</template>

<script setup>
import { ref } from 'vue';

const value = ref(null);
<\/script>
```

## Disabled

When disabled is present, the element cannot be edited and focused.

```vue
<template>
    <div class="flex justify-center">
        <InputMask v-model="value" mask="999-99-9999" disabled />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(null);
<\/script>
```

## Invalid

The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with form validation.

```vue
<template>
    <div class="flex flex-wrap justify-center gap-4">
        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
<\/script>
```

## Forms

InputMask integrates seamlessly with the PrimeVue Forms library.

```vue
<template>
    <div class="flex justify-center">
        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
            <div class="flex flex-col gap-1">
                <InputMask name="serialNumber" mask="99-999999" placeholder="99-999999" fluid />
                <Message v-if="$form.serialNumber?.invalid" severity="error" size="small" variant="simple">{{ $form.serialNumber.error?.message }}</Message>
            </div>
            <Button type="submit" severity="secondary">Submit</Button>
        </Form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { zodResolver } from '@primevue/forms/resolvers/zod';
import { useToast } from "primevue/usetoast";
import { z } from 'zod';

const toast = useToast();
const initialValues = ref({
    serialNumber: ''
});

const resolver = ref(zodResolver(
    z.object({
        serialNumber: z.string().min(1, { message: 'Serial number is required.' })
    })
));

const onFormSubmit = ({ valid }) => {
    if (valid) {
        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
    }
};
<\/script>
```

## Accessibility

Screen Reader InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby , aria-label props. Keyboard Support Key Function tab Moves focus to the input.

```vue
<template>
    <label for="date">Date</label>
    <InputMask id="date" mask="99/99/9999" />

    <span id="phone">Phone</span>
    <InputMask aria-labelledby="phone" mask="(999) 999-9999" />

    <InputMask aria-label="Age" mask="99" />
</template>
```

## Input Mask API

### Props

| Name |Type |Default |Description |
| --- | --- | --- | --- |
| modelValue | null \| string | - | Value of the component. |
| defaultValue | null \| string | - | The default value for the input when not controlled by  `modelValue` . |
| slotChar | string | _ | Placeholder character in mask, default is underscore. |
| mask | string | - | Mask pattern. |
| id | string | - | Identifier of the element. |
| class | string \| object | - | Style class of the input field. |
| placeholder | string | - | Placeholder text for the input. |
| autoClear | boolean | true | Clears the incomplete value on blur. |
| unmask | boolean | false | Defines if model sets the raw unmasked value to bound value or the formatted mask value. |
| readonly | boolean | false | Whether the items are clickable or not. |
| invalid | boolean | false | When present, it specifies that the component should have invalid state style. |
| name | string | - | Name of the input element. |
| size | any | - | Defines the size of the component. |
| variant | any | null | Specifies the input variant of the component. |
| fluid | boolean | null | Spans 100% width of the container when enabled. |
| disabled | boolean | false | When present, it specifies that the component should be disabled. |
| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
| pt | any | - | Used to pass attributes to DOM elements inside the component. |
| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
| unstyled | boolean | false | When enabled, it removes component related styles in the core. |

### Emits

| Name |Parameters |Description |
| --- | --- | --- |
| keypress | Function |  |
| paste | Function |  |
| complete | Function |  |

### Pass Through Options

| Name |Type |Description |
| --- | --- | --- |
| root | InputMaskPassThroughOptionType | Used to pass attributes to the InputText component. |
| pcInputText | any | Used to pass attributes to the InputText component. |
| hooks | any | Used to manage all lifecycle hooks. |

### Theming

### CSS Classes

| Class |Description |
| --- | --- |
| p-inputmask | Class name of the root element |