Multiselect
Multiselects são componentes que permitem ao usuário selecionar múltiplas opções divididas em categorias.
Quando usar:
- Houver a possibilidade de selecionar múltipos itens em um select.
- Se deseja classificar os itens do select em categorias.
Quando não usar:
- Os itens do select não puderem ser classificados em categorias.
- Houver necessidade de detalhar no input as opções selecionadas, já que mostramos como resumo apenas quantas e não quais foram as opções escolhidas.
Observações:
- O Multiselect do Cuida é um wrapper do Vue Multiselect com a sua adequação aos nossos princípios e recomendações. Para informações detalhadas sobre o componente, recomendamos leitura da documentação.
Uso
js
<CdsMultiselect
variant="green"
size="md"
text="Lorem Ipsum"
@click="multiselectClick = true"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* modelValue (required) | array | -- | Guarda o valor selecionado do multiselect. | |
label | string | 'text' | -- | Especifica a label do input. |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
trackBy | string | 'value' | -- | Utilizada para comparar objetos. Seu valor deve ser único. |
required | boolean | false | -- | Exibe asterisco indicativo de obrigatoriedade (obs.: não faz a validação) |
disabled | boolean | false | -- | Desabilita o Multiselect. |
errorMessage | string | 'Valor inválido' | -- | Especifica a mensagem de erro, que será exibida caso o estado seja inválido |
state | string | 'default' | default invalid | Especifica o estado do TextInput. As opções são 'default' e 'invalid'. |
* options (required) | array | [] | -- | Lista de opções do Multiselect. |
optionsField | string | 'value' | -- | Indica o nome da chave do objeto a ser considerada na renderização das opções do select. |
hideSelectAll | boolean | false | -- | Permite ocultar o botão "selecionar todos" |
mobile | boolean | false | -- | Define o tipo do input, se true será um input adaptado para o mobile |
Eventos
Nome | Descrição |
|---|---|
@input | Evento utilizado para implementar o v-model. |
@update:modelValue | Evento que indica que o valor do Multiselect foi alterado |
@remove | Evento disparado quando um item é deselecionado. |
@select | Evento disparado quando um item é selecionado. |
@close | Evento disparado quando o select é fechado. |
Slots
Nome | Descrição |
|---|---|
#label | |
#option | |
#selection |