Uma ampla coleção de exemplos com código funcional que você pode usar em seu projeto hoje.
O tipo form adiciona automaticamente um botão de envio. Adicione classes para que sua interface possa se conformar aos estilos do seu projeto.
Usando o tipo list, podemos criar entradas repetidoras que podem ter múltiplos valores. Este exemplo usa um loop para permitir que os usuários adicionem/removam endereços de e-mail.
Use o componente FormKitSchema para mostrar condicionalmente uma entrada (com regras de validação) com base no valor de outra entrada.
Use o componente FormKitSchema para renderizar o formulário de múltiplas etapas a partir do guia de formulário de múltiplas etapas.
Crie um botão de envio personalizado com poder de esquema que desabilita dinamicamente enquanto o formulário está sendo enviado e fornece um spinner de carregamento.
Adiciona uma simples contagem regressiva de caracteres restantes em uma área de texto com uma dica ao passar o mouse baseada na propriedade maxlength da área de texto.
Use um plugin para adicionar um asterisco (*) à área da etiqueta das entradas que têm a regra "obrigatório".
Use um plugin para converter valores de string para números. Útil se você deseja que entradas do tipo number retornem um primitivo JS Number.
Use um plugin para adicionar um ícone antes das mensagens de validação, estendendo a definição do esquema.
Use um plugin para definir todos os valores iniciais de entrada como uma string vazia "" em vez de undefined.
Use um plugin para permitir que entradas da família button tenham um spinner de carregamento que pode ser acionado à vontade com uma nova propriedade loading.
Use um plugin para definir automaticamente as propriedades name, label e help de uma entrada com base no id. Reduz declarações repetitivas de propriedades no seu HTML.
Um plugin que adiciona o atributo data-testid com o id do nó para bibliotecas de teste.
Um plugin que rola automaticamente para o primeiro erro na página ao enviar ou quando erros do backend são adicionados.
Uma entrada personalizada com botões de passo +1 e -1. Feita usando createInput().
Uma entrada personalizada simples que permite aos usuários selecionar uma moeda e inserir um valor. Feita usando createInput().
Use slots ou a funcionalidade :sections-schema para modificar o HTML de um rótulo.
Atualize condicionalmente as opções de uma entrada de seleção com base no valor de outra entrada.
Usando apenas novos estilos (Classes Tailwind neste exemplo), aplique um tratamento de cartão à estrutura padrão de entrada de rádio do FormKit.
Adicione um spinner de carregamento à sua entrada quando uma regra de validação assíncrona estiver pendente de validação.
Habilite um botão de salvar/enviar apenas se um usuário tiver alterado algum valor dentro de um formulário.
Adicione transições às mensagens de validação injetando um componente TransitionGroup do Vue usando o :sections-schema do FormKit.
Um projeto inicial funcional no StackBlitz com Nuxt, FormKit e Tailwind CSS.
Use o objeto de configuração classes e as props do FormKit para produzir classes dinâmicas com base no estado da entrada. Útil para Tailwind e outras bibliotecas de utilitários CSS.
Crie variações de UI das entradas do FormKit (como botões) que se atualizam com base em dados reativos em seus componentes.