Formulário

Modelos

Escolha de modelo em radio com um slider de esforço que escreve o nível ao lado.

data-u="models"

Exemplo

Modelos

Rápido Equilibrado Profundo Autônomo

EsforçoMédio

<article class="u-card u-wall" data-wall="models">
  <div class="u-models" style="padding:var(--s2)" data-u="models" role="radiogroup" aria-label="Modelos">
    <div class="u-models__title">Modelos</div>
    <label class="u-models__opt">Rápido<span class="u-radio"><input type="radio" name="wm" value="rapido"><span class="u-radio__dot"></span></span></label>
    <label class="u-models__opt">Equilibrado<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">Profundo<span class="u-radio"><input type="radio" name="wm" value="profundo"><span class="u-radio__dot"></span></span></label>
    <label class="u-models__opt">Autônomo<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>Esforço<strong data-effort>Médio</strong></b>
      <div data-u="slider" data-u-props='{
        "min": 0,
        "max": 4,
        "value": 2,
        "label": "Esforço",
        "left": "Mais rápido",
        "right": "Mais inteligente",
        "texts": ["Mínimo", "Baixo", "Médio", "Alto", "Máximo"]
      }'></div>
    </div>
  </div>
</article>

Instalação

Modelos vem no pacote completo, em unslop.css e unslop.js:

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

Um bloco pronto que usa modelos:

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

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Props

Sem props. O registro models só escuta o u:change do slider de dentro e escreve o texto em [data-effort].

Classes e variantes

Classe	O que faz
`u-models`	O host, com `role="radiogroup"` e `aria-label`.
`u-models__opt`	Cada opção: rótulo mais um `u-radio`.
`u-models__effort`	Linha do esforço, com o nível em `[data-effort]` e um slider.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
host	`role="radiogroup"`, `aria-label`	Escreva no HTML.
opções	input `type="radio"`	Radios nativos com o mesmo name.

Teclado

Tecla	Faz
Setas	trocam o modelo (radio nativo)
Tab	vai pro slider de esforço