O campo de seleção utiliza o campo de seleção nativo do HTML. Campos de seleção podem ser de seleção de valor único ou de múltiplos valores usando o atributo multiple. Existem 4 maneiras de fornecer opções para um campo de seleção:
label e value (o mesmo que os campos de checkbox e radio)<option> diretamente dentro do slot default.Precisa de mais flexibilidade do que o campo de seleção HTML select oferece? Confira o campo dropdown disponível no FormKit Pro.
Listas de seleção são mais comumente usadas para selecionar um único item de uma lista de opções.
A maneira mais simples de fornecer opções é um array de strings. As strings fornecidas serão usadas tanto para o rótulo quanto para o valor da opção.
Você também pode fornecer a propriedade options onde as chaves são valores e os valores de cada propriedade são rótulos.
A maneira mais flexível de definir opções é fornecendo um array de objetos. Os objetos devem incluir propriedades value e label — mas também podem incluir uma propriedade help assim como um objeto attrs de atributos adicionais para aplicar a cada tag do campo de seleção.
Para passar atributos adicionais a cada elemento <option>, seu objeto também pode conter uma propriedade attrs.
[
{
label: 'Meu Rótulo',
value: 'um-valor',
attrs: {
disabled: true
}
}
]
optgroup)Usando a sintaxe array de objetos, você também pode criar grupos de opções (<optgroup> em HTML). Para fazer isso, forneça uma opção group:
Às vezes, pode ser desejável exibir manualmente o conteúdo de uma lista de seleção para criar estruturas especializadas. Isso pode ser feito usando o slot default para exibir explicitamente suas opções.
Ao usar o slot padrão para exibir opções, você não deve usar as props placeholder ou options.
A entrada select também suporta um atributo multiple que permite a seleção múltipla. Quando usado com o FormKit, essa opção produz um array de valores.
Entradas de seleção com o atributo multiple podem ser desafiadoras para alguns usuários porque exigem que se mantenha pressionadas as teclas de controle ou comando para realizar seleções múltiplas. Dependendo do seu público, você pode querer considerar o uso de uma entrada de caixa de seleção com options em vez disso.
Ao usar o slot padrão em conjunto com o atributo multiple, você deve atribuir explicitamente o atributo selected a cada opção.
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| options | Array/Object | [] | Um objeto de pares valor/etiqueta ou um array de strings, ou um array de objetos que devem conter uma propriedade de etiqueta e valor. |
| placeholder | String | none | Quando definido, o FormKit injeta uma tag option oculta e não selecionável como o primeiro valor da lista para servir como um placeholder. |
| select-icon | String | ’’ | Especifica um ícone para colocar na seção selectIcon. O padrão é o ícone select. |
| 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.. |
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 |
|---|---|
| option | Responsável por renderizar cada opção. O contexto inclui uma propriedade option com a opção sendo renderizada. Este objeto inclui propriedades de label e value. |
| selectIcon | Um elemento para exibir um ícone para abrir a lista de seleção. Geralmente uma seta para baixo. |
| 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 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:
| Chave de Seção | Atributo | Padrão | Descriçã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. |