# VelvetKit

## File field (`UI::FileField`)

A drag-and-drop file picker with a label, hint and error message, standalone or with a form builder.

Add it: `bin/rails generate velvetkit:add file_field`

Also adds: `label`, `form_field`, `icon`

Stimulus: `ui--file-field`

### Arguments

```ruby
UI::FileField.new(multiple: false, accept: nil, label: nil, label_size: :default, label_weight: :medium, hint: nil, required: false, error: nil, disabled: false, form: nil, field: nil, class: nil, **html_attrs)
```

### Notes

UI::FileField — a drag-and-drop dropzone over a native file input.

The input itself is sr-only, not hidden: it stays in the accessibility
tree and keyboard/native-picker behavior (Tab, Enter/Space, the OS file
dialog) comes from the real <input type="file">, same as every other
styled-native-control component here. The dropzone is a <label> around it,
so clicking anywhere in it opens the picker without any JS, and the
ui--file-field controller only adds what a label can't: drag-over
highlighting and listing the chosen file names.

### Example: With Error

```erb
<div class="max-w-sm">
  <%= render(UI::FileField.new(label: "Resume", error: "Must be a PDF under 5MB")) %>
</div>
```

### Example: Multiple Files

```erb
<div class="max-w-sm">
  <%= render(UI::FileField.new(label: "Attachments", hint: "Drop as many as you like", multiple: true)) %>
</div>
```