# form-input-radiocheck-radio

The markup of every demo on <https://kuiper.oeds.it/form-input-radiocheck-radio/>, 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>radio</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="radio-1" class="input-label"><input id="radio-1" name="radio" type="radio" value="1">radio1</label></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="radio-2" class="input-label"><input id="radio-2" name="radio" type="radio" value="2">radio2</label></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="radio-3" class="input-label"><input id="radio-3" name="radio" type="radio" value="3" disabled>radio3</label></div></div>
    </div>
   </fieldset>
   <output></output>
  </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="radio-base-1" class="input-label"><input id="radio-base-1" name="radio-base-1" type="radio">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="radio-xs-1" class="input-label input-xs"><input id="radio-xs-1" name="radio-xs-1" type="radio">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="radio-s-1" class="input-label input-s"><input id="radio-s-1" name="radio-s-1" type="radio">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="radio-m-1" class="input-label input-m"><input id="radio-m-1" name="radio-m-1" type="radio">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="radio-l-1" class="input-label input-l"><input id="radio-l-1" name="radio-l-1" type="radio">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="radio-xl-1" class="input-label input-xl"><input id="radio-xl-1" name="radio-xl-1" type="radio">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>radio</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="radio-1-on-light" class="input-label"><input id="radio-1-on-light" name="radio-on-light" type="radio" value="1">radio1</label></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="radio-2-on-light" class="input-label"><input id="radio-2-on-light" name="radio-on-light" type="radio" value="2">radio2</label></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="radio-3-on-light" class="input-label"><input id="radio-3-on-light" name="radio-on-light" type="radio" value="3" disabled>radio3</label></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>radio</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="radio-1-on-dark" class="input-label"><input id="radio-1-on-dark" name="radio-on-dark" type="radio" value="1">radio1</label></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="radio-2-on-dark" class="input-label"><input id="radio-2-on-dark" name="radio-on-dark" type="radio" value="2">radio2</label></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="radio-3-on-dark" class="input-label"><input id="radio-3-on-dark" name="radio-on-dark" type="radio" value="3" disabled>radio3</label></div></div>
    </div>
   </fieldset>
  </div>
 </div>
</div>
```