Índice da vitrine
Ações
Formulários
Retorno
Conteúdo
Campos
Entradas de texto, grupos com acessório, selects, o select pesquisável e os quatro estados de validação.
Inputs
Campos de texto sobre a tinta da lente, sem as sombras de clique: campo é superfície de escrita.
Grupos de campo
O campo colado a acessórios e botões, como uma peça só. O acessório é rótulo fixo; quando precisar de clique, entra um botão no lugar.
Selects
O select nativo com a mesma tinta dos inputs, e o estado desabilitado ao lado.
Select pesquisável
Um input com datalist: o navegador filtra enquanto se digita, sem uma linha de JS. A lista é desenhada pelo sistema, então não segue o tema, e o valor é texto livre.
Estados de campo
As quatro classes de estado, nas cores das intenções. A borda é sinal de apoio: a mensagem escrita continua obrigatória, porque cor sozinha não comunica.
v-model="email"v-model="email"v-model="nickname"v-model="company"Escala dos campos
Os mesmos controles em sm, md e lg. A altura é um token só (--field-h), e é por isso que campo, select, calendário e telefone param na mesma linha em qualquer tamanho.
--sm
md
--lg
Seletores de data, hora e cor
Um seletor só para as três perguntas de tempo — data, hora e data com hora — no mesmo painel do sistema, com navegação direta por mês e ano. O input nativo de data não aparece em lugar nenhum do template; a cor é a única que continua sendo a do dispositivo.
Telefone e aniversário
Os dois campos em que o input comum não basta. O telefone precisa do país explícito — o mesmo número escrito de quatro formas não é discável — e o aniversário precisa começar pelo ANO: um calendário aberto no mês corrente é o pior lugar para procurar 1980.
Campo de etiquetas
Chips dentro de um campo. Enter confirma e Backspace com o campo vazio apaga a última: os dois gestos que quem usa este controle já espera.
Duplicatas são ignoradas, e cada etiqueta tem botão de remover rotulado.