### Базовое использование
```tsx
import React from 'react';
import { InformationWrapper, TextField, TextArea } from '@salutejs/plasma-web';
export function App() {
const size = 'm';
const commonProps = {
label: 'Лейбл',
titleCaption: 'Подпись к полю',
leftHelper: 'Подсказка слева',
rightHelper: 'Подсказка справа',
hintText: 'Текст тултипа',
};
const SvgPlaceholder = () => {
return (
);
};
return (
);
}
```
### Размер компонента Размер компонента задается с помощью свойства `size` :
```tsx
import React from 'react';
import { InformationWrapper } from '@salutejs/plasma-web';
export function App() {
const commonProps = {
label: 'Лейбл',
titleCaption: 'Подпись к полю',
leftHelper: 'Подсказка слева',
rightHelper: 'Подсказка справа',
hintText: 'Текст тултипа',
};
const SvgPlaceholder = () => {
return (
);
};
return (
);
}
```
### Положение label Положение label задается с помощью свойства `labelPlacement` :
```tsx
import React from 'react';
import { InformationWrapper } from '@salutejs/plasma-web';
export function App() {
const commonProps = {
label: 'Лейбл',
titleCaption: 'Подпись к полю',
leftHelper: 'Подсказка слева',
rightHelper: 'Подсказка справа',
hintText: 'Текст тултипа',
};
const SvgPlaceholder = () => {
return (
);
};
return (
);
}
```
### Индикатор обязательности Отображение индикатора включается свойством `hasRequiredIndicator` ,
а его положение регулируется свойством `requiredIndicatorPlacement` :
```tsx
import React from 'react';
import { InformationWrapper } from '@salutejs/plasma-web';
export function App() {
const commonProps = {
titleCaption: 'Подпись к полю',
leftHelper: 'Подсказка слева',
rightHelper: 'Подсказка справа',
hintText: 'Текст тултипа',
};
const SvgPlaceholder = () => {
return (
);
};
return (
);
}
```