Forms

Models

Model choice as radios with an effort slider that writes the level next to it.

data-u="models"

Example

Models

Fast Balanced Deep Autonomous

EffortMedium

<article class="u-card u-wall" data-wall="models">
  <div class="u-models" style="padding:var(--s2)" data-u="models" role="radiogroup" aria-label="Models">
    <div class="u-models__title">Models</div>
    <label class="u-models__opt">Fast<span class="u-radio"><input type="radio" name="wm" value="rapido"><span class="u-radio__dot"></span></span></label>
    <label class="u-models__opt">Balanced<span class="u-radio"><input type="radio" name="wm" value="equilibrado" checked><span class="u-radio__dot"></span></span></label>
    <label class="u-models__opt">Deep<span class="u-radio"><input type="radio" name="wm" value="profundo"><span class="u-radio__dot"></span></span></label>
    <label class="u-models__opt">Autonomous<span class="u-radio"><input type="radio" name="wm" value="autonomo"><span class="u-radio__dot"></span></span></label>
    <div class="u-models__effort">
      <b>Effort<strong data-effort>Medium</strong></b>
      <div data-u="slider" data-u-props='{
        "min": 0,
        "max": 4,
        "value": 2,
        "label": "Effort",
        "left": "Faster",
        "right": "Smarter",
        "texts": ["Minimum", "Low", "Medium", "High", "Maximum"]
      }'></div>
    </div>
  </div>
</article>

Installation

Models ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses models:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-models

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

No props. The models registration only listens to the inner slider's u:change and writes the text into [data-effort].

Classes and variants

Class	What it does
`u-models`	The host, with `role="radiogroup"` and `aria-label`.
`u-models__opt`	Each option: a label plus a `u-radio`.
`u-models__effort`	Effort row, with the level in `[data-effort]` and a slider.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
host	`role="radiogroup"`, `aria-label`	Write it in the HTML.
options	`type="radio"` input	Native radios with the same name.

Keyboard

Key	Does
Arrows	change the model (native radio)
Tab	goes to the effort slider