Formulário

Campo de texto

Input com rótulo em cima, fundo de azulejo e foco visível.

só CSS

Exemplo

E-mail

<label class="u-field">E-mail
  <input class="u-input" type="email" placeholder="[email protected]">
</label>

Campo de texto vem no pacote completo, em unslop.css:

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

Sem build É só CSS: com unslop.css na página, as classes já funcionam.

Classe	O que faz
`u-field`	O label que envolve rótulo e input, em grade com 8px entre eles.
`u-input`	O input: 40px de altura, ocupa a largura do campo.

Onde	Atributo	O que diz
label	envolvendo o input	O texto do label vira o nome do campo, sem precisar de id.
:`focus-visible`	no `u-input`	Contorno de 2px na cor do texto.

Tecla	Faz
Tab	foca o campo