Formulário

Radio

Escolha uma opção de um grupo, com o ponto crescendo ao marcar.

só CSS

Exemplo

Mensal Anual

<label class="u-radio"><input type="radio" name="plano" checked><span class="u-radio__dot"></span>Mensal</label>
<label class="u-radio"><input type="radio" name="plano"><span class="u-radio__dot"></span>Anual</label>

Instalação

Radio 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-radio`	O label que envolve input e ponto.
`u-radio__dot`	O círculo desenhado.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
name	atributo nativo	Mesmo name agrupa as opções.
checked	atributo nativo	Opção marcada.

Teclado

Tecla	Faz
Tab	entra no grupo
Setas	trocam a opção marcada (nativo)