# form-textarea

The markup of every demo on <https://kuiper.oeds.it/form-textarea/>, 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 `textarea-*` 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><textarea id="base" name="base" class="" placeholder="textarea"></textarea></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><textarea id="xs" name="xs" class="textarea-xs" placeholder="xs"></textarea></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><textarea id="s" name="s" class="textarea-s" placeholder="s"></textarea></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><textarea id="m" name="m" class="textarea-m" placeholder="m"></textarea></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><textarea id="l" name="l" class="textarea-l" placeholder="l"></textarea></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><textarea id="xl" name="xl" class="textarea-xl" placeholder="xl"></textarea></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: 4 specimens.

```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">textarea</label><textarea id="base-on-light" name="base-on-light" placeholder="textarea"></textarea><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="textarea-rows3-on-light">textarea[rows3]</label><textarea id="textarea-rows3-on-light" name="textarea-rows3-on-light" placeholder="textarea" rows="3"></textarea><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="textarea-rows5-on-light">textarea[rows5]</label><textarea id="textarea-rows5-on-light" name="textarea-rows5-on-light" placeholder="textarea" rows="5"></textarea><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="textarea-rows7-on-light">textarea[rows7]</label><textarea id="textarea-rows7-on-light" name="textarea-rows7-on-light" placeholder="textarea" rows="7"></textarea><output></output></div></div>
</div>
```

## color

Varies: 4 specimens.

```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">textarea</label><textarea id="base-on-dark" name="base-on-dark" placeholder="textarea"></textarea><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="textarea-rows3-on-dark">textarea[rows3]</label><textarea id="textarea-rows3-on-dark" name="textarea-rows3-on-dark" placeholder="textarea" rows="3"></textarea><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="textarea-rows5-on-dark">textarea[rows5]</label><textarea id="textarea-rows5-on-dark" name="textarea-rows5-on-dark" placeholder="textarea" rows="5"></textarea><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="textarea-rows7-on-dark">textarea[rows7]</label><textarea id="textarea-rows7-on-dark" name="textarea-rows7-on-dark" placeholder="textarea" rows="7"></textarea><output></output></div></div>
</div>
```