Tente alterar type="radio" na linha 5 para checkbox.
A estrutura de formulários código aberto para Vue.
O FormKit capacita desenvolvedores a construir formulários 10 vezes mais rápido, simplificando a estrutura, geração, validação, tema, envio, tratamento de erros e muito mais.
Formulários
Recursos poderosos de formulário para fluxo de dados, tratamento de erros e gerenciamento de estado.
Inputs
24+ inputs acessíveis alimentados por um único componente.
Validação
Mais de 20 regras de validação incorporadas e suporte para criar suas próprias.
Estilização
Use o tema Genesis CSS padrão do FormKit, o Tailwind ou sua própria abordagem personalizada com controle total sobre cada elemento DOM.
Schema
Gere formulários com o esquema dinâmico compatível com JSON do FormKit. Totalmente serializável para armazenamento em banco de dados.
Arquitetura
Projetado para lidar com formulários mais exigentes.
Apoiado por
novo — v.1.4.0
Apresentando Temas FormKit
Temas Tailwind de código aberto, licenciados pelo MIT, para FormKit.
Formulários
Preencha um formulário com um único objetoColeta automaticamente todos os valores de inputAplica erros do backend aos formulários e inputsAcesse qualquer valor do formulário sem
v-modelOpcionalmente, v-model de um formulário inteiro com um único objetoEstado de carregamento automático para envios assíncronosRastreamento de estado para inválido, carregando, erros e maisDesabilite facilmente todos os inputs em um formulárioRedefinição do formulárioEstruture seus dados como objetos, arrays e valores escalaresCarregar exemplo ao vivo
Inputs
Estrutura inteira em 1 componente
<FormKit />Inclui todos os tipos de input (24+)Acessibilidade integradaRastreamento de estado para inválido, carregando, erros e maisExportação para reestruturar o HTML do inputCriar inputs personalizadosControlar valores de input com middlewareDOM automático para rótulo, ajuda, mensagens e maisSuporte para inputs condicionaisSlots para cada elemento DOMCarregar exemplo ao vivo
Validação
Aplica regras em uma única propInclui mensagens de validação em mais de 40 idiomasControla quando os erros são exibidosSuporte para regras assíncronasValidação com debounce para regras custosasBloqueia o envio do formulário até que a validação seja aprovadaSuporte para regras opcionais e condicionaisAdicione regras personalizadas e mensagens de validaçãoMensagens de formulário e input
Carregar exemplo ao vivo
Estilização
Abordagem de estilização agnósticaTema de primeira parte opcionalTemas TailwindSuporte para frameworks CSS de utilidadeAdicionar classes a qualquer elemento DOMSobrescrever qualquer elemento DOMAtributos dinâmicos que acompanham o estadoPacote de ícones integradoUse seus próprios ícones SVGIntegração fácil com bibliotecas de ícones de terceiros
Carregar exemplo ao vivo
Schema
Formato compatível com JSONRenderiza qualquer DOM e componentesLógica booleana, comparação, expressões aritméticasReferencie dados reativos dentro do esquemaSuporte para renderização de listaRenderiza qualquer slot nomeadoRenderização condicionalAtalho para renderizar inputs do FormKitArmazene o esquema em qualquer lugar
Carregar exemplo ao vivo
Tente alterar pricePerUser na linha 2 para ver o formulário gerado pelo esquema sendo renderizado novamente.
Arquitetura
Sem dependências de terceirosSuporte a TypeScriptSeleção granular de recursosEstenda com pluginsOs plugins podem ser aplicados a nível de input, grupo ou globalCompartilhe código entre inputs com
featuresEstenda com hooksSistema de eventosCrie seus próprios inputsSuporte completo para SSREnvolva inputs de terceirosFerramenta de linha de comandoPersonalize com a configuração do FormKitComunidade ativa e suporteArquitetura de internacionalizaçãoEstrutura de input hierárquicaCarregar exemplo ao vivo
FormKit Pro
Potencialize o FormKit com inputs Pro opcionais
Controles de formulário comerciais poderosos, com a mesma API excelente.
- Autocomplete
- Colorpicker
- Currency
- Datepicker
- Dropdown
- Mask
- Rating
- Repeaterfree
- Slider
- Taglist
- Togglefree
- Toggle Buttonsfree
- Transfer List
- Unit
Autocomplete
Pesquise e selecione a partir de uma lista personalizada de opções.