EchoSistema Template
Índice da vitrine

Opções

Togglers, caixas de marcar, rádios, as opções em cartão e o slider.

Togglers

A chave do sistema: um checkbox nativo por baixo, com teclado, foco e rótulo clicável de graça. Aceita as mesmas intenções dos botões.

.es-switch

.es-switch--sm … --lg

.es-switch + .es-i--*

Checkboxes

A caixa de marcar sobre o input nativo: marcado, indeterminado e desabilitado são estados que só o elemento entrega de graça.

.es-check

.es-check--sm … --lg, .es-check--round

.es-check + .es-i--*

Radio buttons

O mesmo desenho em contorno redondo. A exclusividade e as setas do teclado vêm do atributo name, nunca de script.

.es-radio

.es-radio--sm … --lg

Opções em cartão

O rádio e a caixa de marcar com corpo de cartão, para escolhas que pedem título, descrição e ícone. O destaque lê o estado do input real, sem classe ligada por script.

.es-option + <echo-radio>

.es-option + <echo-checkbox>

Sliders

O input range nativo com o trilho e o botão do sistema. Setas, Home e End vêm do elemento.

Avaliação

Dois modos, e a diferença é de semântica: em leitura sai um valor com o número por extenso no rótulo; interativa é um grupo de rádios nativos, com as setas do teclado de graça.

readonly

símbolo trocado

.es-rating--sm … --lg

.es-rating + .es-i--*

<echo-rating> interativa

Sua avaliação deste template
3 / 5

Use Tab para chegar ao grupo e as setas para escolher.

EchoSistema Template

A base visual dos sites de plataforma do grupo EchoSistema.