# Mask Props (свойства) для компонента Mask: [{"name":"onChange","type":{"name":"ChangeEventHandler<HTMLInputElement>"}},{"name":"placeholder","type":{"name":"string"}},{"name":"onFocus","type":{"name":"FocusEventHandler<HTMLInputElement>"}},{"name":"onBlur","type":{"name":"FocusEventHandler<HTMLInputElement>"}},{"name":"value","type":{"name":"string | number | readonly string[]"}},{"name":"type","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"contentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"disabled","type":{"name":"boolean"}},{"name":"view","type":{"name":"enum","raw":"\"default\" | \"positive\" | \"warning\" | \"negative\"","value":[{"value":"\"default\""},{"value":"\"positive\""},{"value":"\"warning\""},{"value":"\"negative\""}]}},{"name":"clear","type":{"name":"boolean"}},{"name":"name","type":{"name":"string"}},{"name":"label","type":{"name":"string"}},{"name":"mask","type":{"name":"string"}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\" | \"xl\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""},{"value":"\"xl\""}]}},{"name":"checked","type":{"name":"boolean"}},{"name":"maxLength","type":{"name":"number"}},{"name":"minLength","type":{"name":"number"}},{"name":"readOnly","type":{"name":"boolean"}},{"name":"required","type":{"name":"boolean"}},{"name":"labelPlacement","type":{"name":"enum","raw":"\"outer\" | \"inner\"","value":[{"value":"\"outer\""},{"value":"\"inner\""}]}},{"name":"hintView","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"hintSize","type":{"name":"enum","raw":"\"m\" | \"s\"","value":[{"value":"\"m\""},{"value":"\"s\""}]}},{"name":"textBefore","type":{"name":"string"}},{"name":"textAfter","type":{"name":"string"}},{"name":"keepPlaceholder","type":{"name":"boolean"}},{"name":"requiredPlacement","type":{"name":"enum","raw":"\"right\" | \"left\"","value":[{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"optional","type":{"name":"boolean"}},{"name":"hasRequiredIndicator","type":{"name":"boolean"}},{"name":"hintText","type":{"name":"string"}},{"name":"hintTrigger","type":{"name":"enum","raw":"\"hover\" | \"click\"","value":[{"value":"\"hover\""},{"value":"\"click\""}]}},{"name":"hintTargetIcon","type":{"name":"ReactNode"}},{"name":"hintTargetPlacement","type":{"name":"enum","raw":"\"outer\" | \"inner\"","value":[{"value":"\"outer\""},{"value":"\"inner\""}]}},{"name":"hintPlacement","type":{"name":"Placement | ComputedPlacement[]"}},{"name":"hintHasArrow","type":{"name":"boolean"}},{"name":"hintOffset","type":{"name":"[number, number]"}},{"name":"hintWidth","type":{"name":"string"}},{"name":"hintContentLeft","type":{"name":"ReactNode"}},{"name":"enumerationType","type":{"name":"enum","raw":"\"chip\" | \"plain\"","value":[{"value":"\"chip\""},{"value":"\"plain\""}]}},{"name":"leftHelper","type":{"name":"ReactNode"}},{"name":"chipView","type":{"name":"enum","raw":"\"default\" | \"secondary\" | \"accent\" | \"positive\" | \"warning\" | \"negative\"","value":[{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"accent\""},{"value":"\"positive\""},{"value":"\"warning\""},{"value":"\"negative\""}]}},{"name":"chipType","type":{"name":"enum","raw":"\"text\" | \"default\"","value":[{"value":"\"text\""},{"value":"\"default\""}]}},{"name":"hasDivider","type":{"name":"boolean"}},{"name":"titleCaption","type":{"name":"ReactNode"}},{"name":"onSearch","type":{"name":"(((value: string, event?: KeyboardEvent<HTMLInputElement>) => void) & ((value: string, event?: KeyboardEvent<HTMLInputElement>) => void)) | undefined"}},{"name":"chips","type":{"name":"TextFieldPrimitiveValue[]"}},{"name":"onChangeChips","type":{"name":"((value: TextFieldPrimitiveValue[]) => void)"}},{"name":"chipValidator","type":{"name":"((value: string) => ChipValidatorReturn)"}},{"name":"maskChar","type":{"name":"string"}},{"name":"maskString","type":{"name":"string"}},{"name":"maskFormat","type":{"name":"IMaskItem[]"}},{"name":"showMask","type":{"name":"boolean"}},{"name":"alwaysShowMask","type":{"name":"boolean"}},{"name":"showStartChars","type":{"name":"boolean"}},{"name":"reformat","type":{"name":"((params: { value: string | IInputValue[]; selection: ISelectRange; input?: string; }) => IInputState)"}},{"name":"onValueChange","type":{"name":"((params: { maskedValue: string; value: string; }) => void)"}}] ## Использование Компонент  `Mask`  представляет собой поле ввода с возможностью маскирования значения.
Он реализован на компоненте  TextField 
и наследует практически все его свойства ( `size` ,  `view` ,  `disabled` ,  `label`  и тд.)
```tsx
import React from 'react';
import { Mask } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
return (
<div>
<Mask
label="Лейбл"
leftHelper="Подсказка к полю"
placeholder="Введите дату"
mask="00/00/0000"
maskString="DD/MM/YYYY"
size="l"
/>
</div>
);
}
```
### Маска Маска задается с помощью свойства  `mask` .
Поддерживает следующие символы: | Обозначение | Описание                              |
|-------------|---------------------------------------|
| 0           | любая цифра от 0 до 9                 |
| a (англ.)   | A-Z, a-z                              |
| я           | А-Я, а-я, ё, Ё                        |
| q           | буква "q"                             |
| 2           | цифра "2"                             |
| *           | любой символ                          |
| \           | символ экранирования "\a" - буква "a" | Пример маски для ввода телефона
```tsx
import React from 'react';
import { Mask } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Mask
label="Маска телефона"
placeholder="Введите телефон"
mask="+7 (000) 000 - 00 - 00"
maskChar="_"
size="l"
alwaysShowMask
/>
</div>
);
}
```
### Маска Маска задается с помощью свойства  `mask` .
Поддерживает следующие символы: | Обозначение | Описание                              |
|-------------|---------------------------------------|
| 0           | любая цифра от 0 до 9                 |
| a (англ.)   | A-Z, a-z                              |
| я           | А-Я, а-я, ё, Ё                        |
| q           | буква "q"                             |
| 2           | цифра "2"                             |
| *           | любой символ                          |
| \           | символ экранирования "\a" - буква "a" | Пример маски для ввода телефона ```tsx
import React from 'react';
import { Mask } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Mask
label="Маска телефона"
placeholder="Введите телефон"
mask="+7 (000) 000 - 00 - 00"
maskChar="_"
size="l"
alwaysShowMask
/>
</div>
);
}
```
Пример маски для ввода даты
```tsx
import React from 'react';
import { Mask } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Mask
label="Маска даты"
placeholder="Введите дату"
mask="00/00/0000"
maskString="DD/MM/YYYY"
size="l"
/>
</div>
);
}
```
### Маска Маска задается с помощью свойства  `mask` .
Поддерживает следующие символы: | Обозначение | Описание                              |
|-------------|---------------------------------------|
| 0           | любая цифра от 0 до 9                 |
| a (англ.)   | A-Z, a-z                              |
| я           | А-Я, а-я, ё, Ё                        |
| q           | буква "q"                             |
| 2           | цифра "2"                             |
| *           | любой символ                          |
| \           | символ экранирования "\a" - буква "a" | Пример маски для ввода телефона ```tsx
import React from 'react';
import { Mask } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Mask
label="Маска телефона"
placeholder="Введите телефон"
mask="+7 (000) 000 - 00 - 00"
maskChar="_"
size="l"
alwaysShowMask
/>
</div>
);
}
```
Пример маски для ввода даты ```tsx
import React from 'react';
import { Mask } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Mask
label="Маска даты"
placeholder="Введите дату"
mask="00/00/0000"
maskString="DD/MM/YYYY"
size="l"
/>
</div>
);
}
```
Пример маски для ввода даты
```tsx
import React from 'react';
import { Mask } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Mask
label="Маска времени"
placeholder="Введите время"
mask="1\0:00"
maskChar="_"
size="l"
showPrefix
/>
</div>
);
}
```