Inputs, Seletores e Formulários
Os componentes de inputs e selectores são projetados para permitir interações eficientes e intuitivas no sistema. Abaixo estão descrições e especificações para os principais tipos, incluindo suas variações de estilo e estados.
Default Input
Descrição:
Um campo de texto usado para entrada de dados simples, como informações de login, pesquisa ou preenchimento de formulários.
Estados Disponíveis:
Default (Padrão): Campo vazio, pronto para preenchimento.
Placeholder: Texto informativo exibido no campo quando vazio.
Focus: Indica que o campo está ativo, com destaque visual.
Disabled (Desabilitado): Campo desativado, não interativo.
Erro: Indica que o valor inserido não é válido, acompanhado de uma mensagem de erro.
Tamanhos Disponíveis:
Small (Pequeno)
Medium (Médio)
Transição:
Tempo: 300 ms
Easing: Ease Out
Pill-Shaped Input
Descrição:
Uma variação do input com bordas arredondadas, utilizada para uma abordagem visual mais moderna e amigável.
Estados Disponíveis:
Default (Padrão)
Placeholder
Focus
Disabled (Desabilitado)
Erro
Tamanhos Disponíveis:
Small (Pequeno)
Medium (Médio)
Transição:
Tempo: 300 ms
Easing: Ease Out
Select (Dropdown)
Descrição:
Componente suspenso usado para selecionar uma opção a partir de uma lista. Ideal para quando há muitas opções a serem exibidas.
Estados Disponíveis:
Default (Padrão): Pronto para interação.
Placeholder: Exibe texto informativo no campo antes da seleção.
Focus: Indica que o componente está ativo, com borda destacada.
Disabled (Desabilitado): Não interativo.
Aberto: Exibe a lista de opções disponíveis.
Tamanhos Disponíveis:
Small (Pequeno)
Medium (Médio)
Transição:
Tempo: 300 ms
Easing: Ease In/Out