# form-input-file

The markup of every demo on <https://kuiper.oeds.it/form-input-file/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `input-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="base">base</label><input id="base" name="base" type="file" class="" data-input="placeholder:file;"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="xs">xs</label><input id="xs" name="xs" type="file" class="input-xs" data-input="placeholder:xs;"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="s">s</label><input id="s" name="s" type="file" class="input-s" data-input="placeholder:s;"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="m">m</label><input id="m" name="m" type="file" class="input-m" data-input="placeholder:m;"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="l">l</label><input id="l" name="l" type="file" class="input-l" data-input="placeholder:l;"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="xl">xl</label><input id="xl" name="xl" type="file" class="input-xl" data-input="placeholder:xl;"></div></div>
</div>
```

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

Varies: the `required` state.

```html
<div data-grid class="grid-xs">
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="base-on-light">file</label><input id="base-on-light" name="base-on-light" type="file"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-placeholder-on-light">file placeholder</label><input id="file-placeholder-on-light" name="file-placeholder-on-light" type="file" data-input="placeholder:Upload your contract...;"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-icon-on-light">file icon</label><input id="file-icon-on-light" name="file-icon-on-light" type="file" data-input="icon:star;"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-icon-color-on-light">file icon color</label><input id="file-icon-color-on-light" name="file-icon-color-on-light" type="file" data-input="icon:star; icon-color:emphasis;"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-size3-on-light">file size3</label><input id="file-size3-on-light" name="file-size3-on-light" type="file" size="3"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-multiple-on-light">file multiple</label><input id="file-multiple-on-light" name="file-multiple-on-light" type="file" multiple><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-size5-multiple-on-light">file size5 multiple</label><input id="file-size5-multiple-on-light" name="file-size5-multiple-on-light" type="file" size="5" multiple><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-validation-on-light">file validation</label><input id="file-validation-on-light" name="file-validation-on-light" type="file" size="5" multiple required accept="image/png, image/jpeg" data-input="file-maxsize:1024000; file-min:1; file-max:3;"><output></output></div></div>
</div>
```

## color

Varies: the `required` state.

```html
<div data-grid class="grid-xs">
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="base-on-dark">file</label><input id="base-on-dark" name="base-on-dark" type="file"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-placeholder-on-dark">file placeholder</label><input id="file-placeholder-on-dark" name="file-placeholder-on-dark" type="file" data-input="placeholder:Upload your contract...;"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-icon-on-dark">file icon</label><input id="file-icon-on-dark" name="file-icon-on-dark" type="file" data-input="icon:star;"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-icon-color-on-dark">file icon color</label><input id="file-icon-color-on-dark" name="file-icon-color-on-dark" type="file" data-input="icon:star; icon-color:emphasis;"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-size3-on-dark">file size3</label><input id="file-size3-on-dark" name="file-size3-on-dark" type="file" size="3"><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-multiple-on-dark">file multiple</label><input id="file-multiple-on-dark" name="file-multiple-on-dark" type="file" multiple><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-size5-multiple-on-dark">file size5 multiple</label><input id="file-size5-multiple-on-dark" name="file-size5-multiple-on-dark" type="file" size="5" multiple><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="file-validation-on-dark">file validation</label><input id="file-validation-on-dark" name="file-validation-on-dark" type="file" size="5" multiple required accept="image/png, image/jpeg" data-input="file-maxsize:1024000; file-min:1; file-max:3;"><output></output></div></div>
</div>
```
