Input
Campos de entrada coletam dados estruturados, suportando textos, opções, números e confirmações dentro do Proto-Typed.
Quando usar
- Capturar informações essenciais em formulários, checklists e configurações.
- Validar formatos específicos como e-mail, senha ou data com sintaxe declarativa.
- Permitir descrições longas sem sair da tela principal (
___textarea). - Confirmar consentimentos ou escolhas únicas com checkboxes e radios.
Exemplo básico
Formulário com campos variados
Por quê: reúne diferentes tipos de entrada em um fluxo compacto e completo.
Variantes
Select com opções declaradas
Quando usar: limitar a escolha a um conjunto predeterminado. Por quê: evita entradas inválidas ao restringir alternativas disponíveis.
Checkbox para confirmação
Quando usar: capturar consentimentos que podem ser marcados ou desmarcados. Por quê: reflete decisões binárias mantendo controle manual da pessoa usuária.
Radios agrupados
Quando usar: exigir seleção exclusiva entre opções mutuamente excludentes. Por quê: garante que apenas uma alternativa seja escolhida por vez.
Composição (usando com outros)
- Input + Card — agrupa os campos em bloco com título e ações.
- Input + Stack — garante espaçamento vertical consistente entre campos.
- Input + Row-end — alinha botões de submissão e cancelamento.
Formulário modular com stack
Por quê: reutiliza o formulário em diferentes telas mantendo layout padronizado.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
tipo | token (___, ___email, ___password, ___, ___textarea, etc.) | ___ | Determina validação e apresentação do campo. | Sim |
label | string | — | Texto exibido antes da entrada. | Sim |
placeholder | string entre {} | — | Exemplo ou instrução contextual do campo. | Sim |
opções | lista `opção A | opção B` | — | Define itens de selects. |
Erros comuns (Do/Don’t)
❌ Errado — Placeholder vazio
✅ Correto — Placeholder claro
Por quê: placeholders orientam a digitação e reduzem erros no envio.
❌ Errado — Radios interrompidos
✅ Correto — Seleção agrupada
Por quê: radios precisam estar juntos para comunicar que fazem parte do mesmo grupo.
Referências cruzadas
Relacionados
Stack: controla espaçamento entre campos de formulário.Card: envolve formulários com título e ações.Button: aciona envio ou cancelamento dos dados.Login Screen: guia com fluxo completo de autenticação.
Composições recomendadas
- Input + Stack + Row-end → formulários lineares com ações claras.
- Input + Card + Modal → capturar informações rápidas sem sair da tela.
- Input + Component Definition → reutilizar formulários em diferentes contextos.
Formulário em modal
Por quê: permite coletar dados essenciais sem abandonar a tela principal.