Formulário

Busca

Campo de busca em pílula com ícone e atalho de teclado ao lado.

só CSS

Exemplo

⌘K

<label class="u-search">
  <svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  <input type="search" placeholder="Busca rápida" aria-label="Busca rápida">
  <kbd class="u-kbd">⌘K</kbd>
</label>

Instalação

Busca 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.

Classes e variantes

Classe	O que faz
`u-search`	O label em pílula. Ganha fundo de azulejo quando o input tem foco.
`u-kbd`	Tecla de atalho, em fonte mono. Serve também solta no texto.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
`aria-label`	no input	Obrigatório: o placeholder não é nome.
kbd	elemento nativo	Só mostra o atalho. Quem liga o atalho é o seu código.

Teclado

Tecla	Faz
Tab	foca o campo