---
description: Компонент для загрузки файлов.
---

<Overview group="forms">

# File [tag:component]

Компонент для загрузки файлов (реализует нативный элемент `<input type="file" />` и принимает все валидные для этого
элемента свойства). Представляет собой кнопку, при нажатии на которую открывается стандартный диалог выбора файла.

В основе используется компонент [`Button`](/components/button) и принимает все доступные для этого компонента свойства.

</Overview>

{/* @example-description: Базовая кнопка `File` для открытия системного диалога выбора файла. */}
<Playground>
  ```jsx
  <File>Выберите файл</File>
  ```
</Playground>


## Кастомизация

Компонент поддерживает свойство `slotProps`, которое даёт возможность прокинуть свойство в некоторые внутренние элементы.
Это удобно для добавления кастомных классов, data-атрибутов, aria-атрибутов, обработчиков событий, доступов к элементам через `getRootRef` и других расширений, не влияя на внешний API компонента.

{/* @example-description: Кастомизация внутренних элементов `File` через `slotProps` и `getRootRef`. */}
<Playground>
  ```jsx
  const inputRef = React.useRef();

  return (
    <File
      className="my-root-class"
      data-testid="file-root"
      id="file-input-id"
      slotProps={{
        root: {
          id: 'file-root-id',
        },
        input: {
          className: 'my-input-class',
          'aria-label': 'file',
          getRootRef: inputRef,
        },
      }}
    >
      Выберите файл
    </File>
  )
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность благодаря использованию нативного элемента `<input type="file" />`.
Старайтесь оборачивать компонент в `FormItem` или используйте свойства `aria-describedby`/`aria-labelledby` для
предоставления понятного текста, описывающего ожидаемое действие.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `after` | `ReactNode` | `-` | Контент, отображаемый после основного содержимого кнопки. |
| `align` | `AlignType` | `left` |  |
| `appearance` | `"accent" \| "positive" \| "negative" \| "neutral" \| "overlay" \| "accent-invariable"` | `-` | Цветовая схема кнопки. |
| `before` | `ReactNode` | `-` | Контент, отображаемый перед основным содержимым кнопки. |
| `disableSpinnerAnimation` | `boolean` | `-` | Отключает анимацию спиннера загрузки. |
| `elevation` | `Elevation` | `-` | Добавляет тень кнопке. |
| `getRef` | `Ref<HTMLInputElement>` | `-` | **Deprecated**: Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`. |
| `getRootRef` | `Ref<HTMLElement>` | `-` |  |
| `loading` | `boolean` | `-` | Включает состояние загрузки (отображает спиннер).  ⚠️ **Важно для доступности**: При использовании `loading={true}` компонент автоматически устанавливает `aria-label` в значение `loadingLabel` (по умолчанию "Загрузка..."), чтобы скринридер мог объявить контекст загрузки. Вы можете переопределить это значение, передав свойство `loadingLabel`. |
| `loadingLabel` | `string` | `-` | Текст для `aria-label` при состоянии загрузки. Подменяет переданный в компонент `aria-label` только когда `loading={true}`. |
| `mode` | `"link" \| "primary" \| "secondary" \| "tertiary" \| "outline"` | `-` | Режим отображения кнопки. |
| `rounded` | `boolean` | `-` | Добавляет скругленные углы кнопке. |
| `size` | `"s" \| "m" \| "l"` | `-` | Размер кнопки. |
| `slotProps` | `{ root?: (Omit<LabelHTMLAttributes<HTMLLabelElement>, "children"> & HasRootRef<HTMLLabelElement> & HasDataAttribute); input?: (Omit<...> & ... 1 more ... & HasDataAttribute) \| undefined; } \| undefined` | `-` | Свойства, которые можно прокинуть внутрь компонента: - `root`: свойства для прокидывания в корень компонента; - `input`: свойства для прокидывания в скрытый `input`. |
| `stretched` | `boolean` | `-` | Растягивает кнопку на всю ширину контейнера. |