# Attach ### Быстрый старт 
### Управление внешним видом и типом компонента С помощью свойств: `view`  - задается внешний вид `buttonType`  - можно менять вид кнопки:  `button` ,  `iconButton` 
### Управление подсказкой с помощью свойства helperText Вид  `helperText`  задается с помощью свойства  `helperTextView` . Возможные значения свойства: `default`  – по умолчанию; `negative`  – ошибка. 
### Расположение элементов Расположение регулируется свойством Flow, которое позволяет размещать элементы вертикально,
горизонтально или автоматически (перенес на следующую строку при нехватке ширины компонента Attach). 
### Фильтр форматов файлов Свойство  `acceptedFileFormats`  устанавливает доступные форматы файлов. 
### Пример взаимодействия с формой :::tip
С помощью компонента  `InformationWrapper` можно добавить весь необходимый UX/UI для работы с формой, включая: обязательность поле label, caption, hint, etc view
::: 
## Props Props (свойства) для компонента Attach: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"accent\" | \"warning\" | \"dark\" | \"success\" | \"critical\" | \"black\" | \"white\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"accent\""},{"value":"\"warning\""},{"value":"\"dark\""},{"value":"\"success\""},{"value":"\"critical\""},{"value":"\"black\""},{"value":"\"white\""}]}},{"name":"helperTextView","type":{"name":"enum","raw":"\"default\" | \"negative\"","value":[{"value":"\"default\""},{"value":"\"negative\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"text","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"contentPlacing","type":{"name":"enum","raw":"ContentPlacing","value":[{"value":"\"default\""},{"value":"\"relaxed\""}]}},{"name":"additionalContent","type":{"name":"ReactNode"}},{"name":"isLoading","type":{"name":"boolean"}},{"name":"loader","type":{"name":"ReactNode"}},{"name":"stretch","type":{"name":"boolean"}},{"name":"stretching","type":{"name":"enum","raw":"Stretching","value":[{"value":"\"filled\""},{"value":"\"fixed\""},{"value":"\"auto\""}]}},{"name":"square","type":{"name":"boolean"}},{"name":"focused","type":{"name":"boolean"}},{"name":"pin","type":{"name":"enum","raw":"\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\"","value":[{"value":"\"square-square\""},{"value":"\"square-clear\""},{"value":"\"clear-square\""},{"value":"\"clear-clear\""},{"value":"\"clear-circle\""},{"value":"\"circle-clear\""},{"value":"\"circle-circle\""}]}},{"name":"outlined","type":{"name":"boolean"}},{"name":"shiftLeft","type":{"name":"boolean"}},{"name":"shiftRight","type":{"name":"boolean"}},{"name":"blur","type":{"name":"enum","raw":"\"small\" | \"medium\" | \"large\"","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},{"name":"value","type":{"name":"string | number"}},{"name":"contentRight","type":{"name":"ReactNode"}},{"name":"acceptedFileFormats","type":{"name":"string[]"}},{"name":"hideButtonOnAttach","type":{"name":"boolean"}},{"name":"hasAttachment","type":{"name":"boolean"}},{"name":"flow","type":{"name":"enum","raw":"\"horizontal\" | \"vertical\" | \"auto\"","value":[{"value":"\"horizontal\""},{"value":"\"vertical\""},{"value":"\"auto\""}]}},{"name":"helperText","type":{"name":"string"}},{"name":"customIcon","type":{"name":"ReactNode"}},{"name":"onClear","type":{"name":"(() => void)"}},{"name":"buttonType","type":{"name":"enum","raw":"\"button\" | \"iconButton\"","value":[{"value":"\"button\""},{"value":"\"iconButton\""}]}},{"name":"icon","type":{"name":"ReactNode"}}]