# form-element

The markup of every demo on <https://kuiper.oeds.it/form-element/>, 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-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: 2 field kinds (`email`, `text`).

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-2@xl">
  <fieldset>
   <legend>fieldset</legend>
   <div class="grid-xs" data-grid>
    <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="form-element-name">label</label><input id="form-element-name" name="name" type="text" required placeholder="required"><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="form-element-email">label</label><input id="form-element-email" name="email" type="email" required placeholder="required email"><output></output></div></div>
   </div>
  </fieldset>
 </div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-2@xl">
  <fieldset disabled>
   <legend>fieldset [disabled]</legend>
   <div class="grid-xs" data-grid>
    <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="form-element-disabled">label</label><input id="form-element-disabled" name="disabled" type="text" placeholder="disabled by the fieldset"><output></output></div></div>
   </div>
  </fieldset>
 </div>
</div>
```