Para exibir múltiplos botões de alternância, use a propriedade options. As opções podem ser especificadas de 3 maneiras:
label e value (o mesmo que as entradas select e radio).
disabled, help, onLabel e/ou offLabel em uma base por opção.A entrada togglebuttons, por padrão, permite que apenas uma opção seja selecionada. Você pode alterar esse comportamento definindo a propriedade multiple, que então permitirá a seleção de múltiplas opções:
Por padrão, togglebuttons permitirá que você selecione e deselecione, permitindo um estado desligado. Com a propriedade enforced ativada, uma vez que o usuário interagiu com a entrada, um valor sempre será definido, muito parecido com o de uma entrada de rádio.
Assumindo que você está usando os estilos padrão do FormKit, a propriedade vertical aplica atributos de conjunto de dados e estilização para empilhar botões de alternância em uma orientação vertical.
Mais exemplos de propriedades e combinações:
A entrada togglebuttons oferece escolhas entre um ou mais valores; é uma ótima opção quando você deseja que o usuário alterne um recurso entre ligado ou desligado, entre escolhas ou permita múltiplas seleções.
Os valores para os botões de alternância são undefined se não interagidos, true se marcados e false se desmarcados. Você pode alterar esses valores passando as propriedades onValue e offValue. Neste exemplo, definiremos o onValue para a string 'active' e o offValue para a string 'inactive':
Além disso, você pode especificar rótulos secundários definindo as propriedades on-label e off-label. Esses valores são exibidos condicionalmente com base no estado ligado/desligado do interruptor. Os rótulos de valor são renderizados à direita da entrada do interruptor. O "rótulo primário" será movido para a posição do rótulo de entrada acima do interruptor quando rótulos de valor forem usados:
Para múltiplas opções, você pode usar o slot default para definir o conteúdo do interruptor.
Para um único interruptor, você pode usar o slot default para definir o conteúdo do interruptor. Também estão disponíveis os slots on e off para alterar o conteúdo com base em se o interruptor está ativado ou não.
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| off-value | any | false | O valor quando o interruptor está desmarcado. Para uso apenas com botões de alternância independentes. |
| on-value | any | true | O valor quando o interruptor está marcado. Para uso apenas com botões de alternância independentes. |
| off-label | String | undefined | O texto do rótulo do botão quando o interruptor está desmarcado. Para uso apenas com botões de alternância independentes. |
| on-label | String | undefined | O texto do rótulo do botão quando o interruptor está marcado. Para uso apenas com botões de alternância independentes. |
| options | Array/Object | [] | Um objeto de pares valor/rótulo ou um array de strings, ou um array de objetos que devem conter uma propriedade de rótulo e valor. Propriedades adicionais incluem: disabled, help, onLabel e offLabel |
| multiple | Boolean | false | Permite selecionar múltiplas opções. Para uso apenas com botões de alternância múltiplos. |
| enforced | Boolean | false | Garante que pelo menos uma seleção permaneça selecionada uma vez que o campo é ativado. Para uso apenas com botões de alternância múltiplos. |
| vertical | Boolean | false | Aplica atributos de dados e estilização para empilhar botões de alternância em uma orientação vertical. Para uso apenas com botões de alternância múltiplos. |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina 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. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede 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. |
| index | Number | undefined | Permite 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. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por 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-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por 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-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {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-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
A entrada de botões de alternância tem uma construção diferente dependendo se é uma configuração única ou múltipla.
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.
| Section-key | Descrição |
|---|---|
| singleToggle | Embrulho do botão para o botão de alternância único |
| multiToggle | Embrulho do botão para um botão de alternância quando existem múltiplos botões de alternância |
| inputInner | Texto interno do botão para um botão de alternância |
| option | Responsável pelo embrulho ao redor de cada item nas opções. |
| options | Responsável pelo elemento de embrulho ao redor de todos os itens de opção. |
| Mostrar Universal section keys | |
| outer | O elemento de envolvimento mais externo. |
| wrapper | Um invólucro ao redor do rótulo e do input. |
| label | O rótulo do input. |
| prefix | Por padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input. |
| prefixIcon | Um elemento para gerar um ícone antes da seção de prefixo. |
| inner | Um invólucro ao redor do próprio elemento input. |
| suffix | Por padrão, não gera saída, mas permite conteúdo diretamente após um elemento input. |
| suffixIcon | Um elemento para gerar um ícone após a seção de sufixo. |
| input | O próprio elemento input. |
| help | O elemento que contém o texto de ajuda. |
| messages | Um invólucro ao redor de todas as mensagens. |
| message | O elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros. |
Todos os campos de entrada do FormKit são projetados levando em consideração as seguintes considerações de acessibilidade. Ajude-nos a melhorar continuamente a acessibilidade para todos, relatando problemas de acessibilidade aqui:
| Chave de Seção | Atributo | Padrão | Descrição |
|---|---|---|---|
| singleToggle | aria-label | Fornece um nome acessível. | |
| aria-pressed | Indica o estado pressionado do botão de alternância. | ||
| role | checkbox | Indica às tecnologias assistivas que este elemento funciona como uma caixa de seleção. | |
| Mostrar Universal chave de seção | |||
| label | label | for | Associa isso a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| input | input | disabled | Desabilita um elemento HTML, impedindo a interação do usuário e sinalizando um estado não interativo |
| aria-describedby | Aprimora a acessibilidade associando um elemento a uma descrição, auxiliando leitores de tela | ||
| aria-required | Adiciona o estado necessário quando a validação é exigida. | ||
| icon | icon | for | Sempre que um ícone é definido como rótulo, ele o vincula a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| Chave de Seção | Atributo | Padrão | Descrição |
|---|---|---|---|
| multiToggle | aria-label | Fornece um nome acessível. | |
| aria-pressed | Indica o estado pressionado do botão de alternância. | ||
| role | checkbox or radio | Indica às tecnologias assistivas que este elemento funciona como uma caixa de seleção se tiver opções ou rádio se não tiver. | |
| options | role | group | Indica às tecnologias assistivas que este elemento funciona como um grupo. |
| aria-labelledby | Associa este elemento como uma etiqueta para a entrada. | ||
| option | role | listitem | Indica às tecnologias assistivas que este elemento funciona como um item de lista. |
| Mostrar Universal chave de seção | |||
| label | label | for | Associa isso a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| input | input | disabled | Desabilita um elemento HTML, impedindo a interação do usuário e sinalizando um estado não interativo |
| aria-describedby | Aprimora a acessibilidade associando um elemento a uma descrição, auxiliando leitores de tela | ||
| aria-required | Adiciona o estado necessário quando a validação é exigida. | ||
| icon | icon | for | Sempre que um ícone é definido como rótulo, ele o vincula a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| Evento de Teclado | Descrição |
|---|---|
| Tab | Move o foco para a próxima entrada focalizável na página. |
| Shift + Tab | Move o foco para a entrada focalizável anterior na página. |