The plain input
A file field is a field unit with a file control in it, and
input[type="file"].input already has styling from Brio. So, for a single
file in a settings form or an attachment field, this is usually enough.
PNG or JPG, at least 256 pixels square.
<div>
<div class="flow flow-space-3xs" style="max-inline-size: 24rem">
<label for="file-avatar">Avatar</label>
<input id="file-avatar" type="file" class="input" accept="image/*" />
<p class="text-muted text--1">PNG or JPG, at least 256 pixels square.</p>
</div>
</div>
The dropzone
The <brio-dropzone> component can be useful when files are dragged
in: one large file, a batch, or an interface built around dropping. It is an extra,
though, not part of the core bundle, and it has its own component page with the full
markup.