Загрузка файлов

Используйте type="file", чтобы открыть диалог выбора файлов. Задайте accept для подсказки о допустимых типах файлов и multiple для выбора нескольких файлов. Проверяйте типы и размеры файлов отдельно.

#Примеры

<label>
  Вложение
  <input type="file" name="attachment" />
</label>
<label>
  Изображения
  <input type="file" name="images" accept="image/*" multiple />
</label>

#Состояния поля

Укажите required, чтобы требовать файл при отправке формы. При ошибке валидации задайте aria-invalid="true" и свяжите поле с сообщением через aria-describedby. Нажмите Tab, чтобы увидеть стиль фокуса.

<label>
  Обязательное вложение
  <input type="file" required />
</label>
<div>
  <label for="file-input-invalid">Недопустимое вложение</label>
  <input id="file-input-invalid" type="file" aria-invalid="true" aria-describedby="file-input-error" />
  <small id="file-input-error">Выберите файл поддерживаемого типа.</small>
</div>
<label>
  Загрузка недоступна
  <input type="file" disabled />
</label>

Для настройки оформления используйте токены полей выбора файлов.

#Классы расширений

В полной сборке trace-small и trace-large меняют размер поля и его нативной кнопки выбора файла. Средний размер применяется по умолчанию.

<label>
  Малый
  <input type="file" class="trace-small" />
</label>
<label>
  Средний
  <input type="file" />
</label>
<label>
  Большой
  <input type="file" class="trace-large" />
</label>