# form-input-radiocheck-checkbox

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

## fields

One field of every kind this component owns, inside a real `<form>` with a submit and a reset in the footer -- so the browser's own validation, Kuiper's added validators and the `<output>` that receives the messages are all live rather than illustrated.

Varies: the `grid-*` ladder over 2 rungs, `2xs` to `xs`.

```html
<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">
   <fieldset>
    <legend>checkbox</legend>
    <div class="grid-2xs" data-grid>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-1" class="input-label"><input id="checkbox-1" name="checkbox1" type="checkbox" value="1">checkbox1</label><output></output></div></div>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-2" class="input-label"><input id="checkbox-2" name="checkbox2" type="checkbox" value="2">checkbox2</label><output></output></div></div>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-3" class="input-label"><input id="checkbox-3" name="checkbox3" type="checkbox" value="3" disabled>checkbox3</label><output></output></div></div>
    </div>
   </fieldset>
  </div>
 </div>
</div>
```

## 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="checkbox-base-1" class="input-label"><input id="checkbox-base-1" type="checkbox">base</label></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="checkbox-xs-1" class="input-label input-xs"><input id="checkbox-xs-1" type="checkbox">xs</label></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="checkbox-s-1" class="input-label input-s"><input id="checkbox-s-1" type="checkbox">s</label></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="checkbox-m-1" class="input-label input-m"><input id="checkbox-m-1" type="checkbox">m</label></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="checkbox-l-1" class="input-label input-l"><input id="checkbox-l-1" type="checkbox">l</label></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="checkbox-xl-1" class="input-label input-xl"><input id="checkbox-xl-1" type="checkbox">xl</label></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 `grid-*` ladder over 2 rungs, `2xs` to `xs`.

```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">
   <fieldset>
    <legend>checkbox</legend>
    <div class="grid-2xs" data-grid>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-1-on-light" class="input-label"><input id="checkbox-1-on-light" name="checkbox1" type="checkbox" value="1">checkbox1</label><output></output></div></div>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-2-on-light" class="input-label"><input id="checkbox-2-on-light" name="checkbox2" type="checkbox" value="2">checkbox2</label><output></output></div></div>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-3-on-light" class="input-label"><input id="checkbox-3-on-light" name="checkbox3" type="checkbox" value="3" disabled>checkbox3</label><output></output></div></div>
    </div>
   </fieldset>
  </div>
 </div>
</div>
```

## color

Varies: the `grid-*` ladder over 2 rungs, `2xs` to `xs`.

```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">
   <fieldset>
    <legend>checkbox</legend>
    <div class="grid-2xs" data-grid>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-1-on-dark" class="input-label"><input id="checkbox-1-on-dark" name="checkbox1" type="checkbox" value="1">checkbox1</label><output></output></div></div>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-2-on-dark" class="input-label"><input id="checkbox-2-on-dark" name="checkbox2" type="checkbox" value="2">checkbox2</label><output></output></div></div>
     <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><label for="checkbox-3-on-dark" class="input-label"><input id="checkbox-3-on-dark" name="checkbox3" type="checkbox" value="3" disabled>checkbox3</label><output></output></div></div>
    </div>
   </fieldset>
  </div>
 </div>
</div>
```
