Início rápido da instalação Pro 🚀

Exemplo básico

A entrada rating permite que os usuários forneçam feedback com base em uma escala numérica representada por ícones/imagens:

Carregar exemplo ao vivo

Mínimo/máximo

As propriedades min e max definem os valores mínimo e máximo que um usuário final pode selecionar. O max determina o número de ícones renderizados:

Carregar exemplo ao vivo

Passo

Por padrão, a entrada rating incrementará de 1 em 1. A propriedade step permite definir o tamanho do passo entre cada valor. Por exemplo, se você definir step="0.5", o usuário final pode selecionar qualquer valor que seja múltiplo de 0.5. Os passos devem ser um valor entre 0.01 e 1:

Carregar exemplo ao vivo

Ícones

Por padrão, a entrada rating usa o próprio ícone de estrela do FormKit. Você pode mudar qual ícone está sendo usado definindo a propriedade rating-icon. Esta propriedade aceita uma string que usará o plugin de ícones do FormKit:

Carregar exemplo ao vivo

Slots para ícones

Slot padrão

Em vez de especificar um ícone através do plugin de ícones do FormKit, você pode passar um SVG bruto usando o slot default:

Carregar exemplo ao vivo

Slots nomeados

Por último, você pode usar os slots offItem e onItem para passar quaisquer ativos que desejar. Neste exemplo, usaremos imagens diferentes para os estados off e on:

Carregar exemplo ao vivo

Cores

Além de fornecer um ícone, você também pode especificar a cor através de propriedades. Definir a propriedade off-color mudará a cor dos ícones quando eles não estiverem selecionados. A propriedade on-color mudará a cor dos ícones quando estiverem selecionados:

Carregar exemplo ao vivo

Props & Atributos

PropTypePadrãoDescrição
minNumber0O número mínimo de ícones que podem ser selecionados.
maxNumber5O número máximo de ícones que são renderizados.
stepNumber1O passo ou incremento que deve ser aplicado aos ícones `rating`. Os valores aceitos estão entre `0.01` e `1`
hover-highlightBooleantrueDetermina se o estado selecionado do ícone/imagem deve ser mostrado quando passado o mouse por cima.
off-colorStringundefinedDefine a cor a ser aplicada nos ícones dados quando eles não foram selecionados.
on-colorStringundefinedDefine a cor a ser aplicada nos ícones dados quando eles foram selecionados.
Mostrar Universal props
configObject{}Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input.
delayNumber20Número de milissegundos para debounce do valor do input antes de despachar o commit hook.
dirtyBehaviorstringtouchedDetermina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial.
errorsArray[]Array de strings para exibir como mensagens de erro neste campo.
helpString''Texto para o texto de ajuda associado ao input.
idStringinput_{n}O ID único do input. Fornecer um ID também permite acesso global ao nó do input.
ignoreBooleanfalseImpede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais.
indexNumberundefinedPermite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido.
labelString''Texto para o elemento label associado ao input.
nameStringinput_{n}O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos.
parentFormKitNodecontextualPor padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai.
prefix-iconString''Especifica um ícone para colocar na seção prefixIcon.
preservebooleanfalsePreserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado.
preserve-errorsbooleanfalsePor padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo.
sections-schemaObject{}Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva.
suffix-iconString''Especifica um ícone para colocar na seção suffixIcon.
typeStringtextO tipo de input a ser renderizado pela biblioteca.
validationString, Array[]As regras de validação a serem aplicadas ao input.
validation-visibilityStringblurDetermina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live.
validation-labelString{label prop}Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name.
validation-rulesObject{}Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação.
valueAnyundefinedInicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas..

Seções

Você pode direcionar uma seção específica de uma entrada usando a "key" dessa seção, permitindo que você modifique as classes, HTML (por meio de :sections-schema ou o conteúdo (por meio de slots) dessa seção). Saiba mais sobre as seções aqui.

View on a larger screen to see this section diagram.

Avalie sua experiência em nosso cinema
⭐️
Nós lhe enviaremos um cartão-presente se você nos der 5 estrelas.
Você deve fornecer uma avaliação.
Section-keyDescrição
itemsWrapperUm invólucro para todos os itens de avaliação (tanto os ativos quanto os inativos).
offItemsUm contêiner em volta de todos os itens inativos.
offItemWrapperPai imediato em volta de cada item inativo.
onItemsUm contêiner em volta de todos os itens ativos.
onItemWrapperPai imediato em volta de cada item ativo.
Mostrar Universal section keys
outerO elemento de envolvimento mais externo.
wrapperUm invólucro ao redor do rótulo e do input.
labelO rótulo do input.
prefixPor padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input.
prefixIconUm elemento para gerar um ícone antes da seção de prefixo.
innerUm invólucro ao redor do próprio elemento input.
suffixPor padrão, não gera saída, mas permite conteúdo diretamente após um elemento input.
suffixIconUm elemento para gerar um ícone após a seção de sufixo.
inputO próprio elemento input.
helpO elemento que contém o texto de ajuda.
messagesUm invólucro ao redor de todas as mensagens.
messageO elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros.

Acessibilidade

Todos os inputs do FormKit são projetados levando em conta as seguintes considerações de acessibilidade. Ajude-nos a melhorar continuamente a acessibilidade para todos, relatando problemas de acessibilidade aqui:

Marcação semânticaAtributos AriaAcessível por tecladoIndicadores de focoContraste de cores com o tema fornecidoEtiquetas acessíveis, texto de ajuda e erros
Chave de SeçãoAtributoPadrãoDescrição
labellabelforAssocia isso a um elemento de entrada, aprimorando acessibilidade e experiência do usuário
inputinputdisabledDesabilita um elemento HTML, impedindo a interação do usuário e sinalizando um estado não interativo
aria-describedbyAprimora a acessibilidade associando um elemento a uma descrição, auxiliando leitores de tela
aria-requiredAdiciona o estado necessário quando a validação é exigida.
iconiconforSempre que um ícone é definido como rótulo, ele o vincula a um elemento de entrada, aprimorando acessibilidade e experiência do usuário

Interações por Teclado

Evento de TecladoDescrição
TabMove o foco para a próxima entrada focalizável na página.
Shift + TabMove o foco para a entrada focalizável anterior na página.