Select
Selects permitem que o usuário escolha uma opção a partir de uma lista de itens.
Quando usar:
- O usuário tiver de escolher uma única opção em uma lista com diversos itens.
Quando não usar:
- A lista de opções possuir 3 itens ou menos. Nesses casos, recomendamos a utilização de radio buttons.
- O usuário precisar selecionar mais de um item da lista. Nesse caso, utilize ClusteredMultiselects.
Observações:
- Coloque as opções mais prováveis de serem selecionadas no topo do select. Na dúvida, ordene-os em ordem alfanumérica.
- As labels dos selects devem ser sucintas (de uma a três palavras).
- As labels devem ser ser escritas com a primeira letra maiúscula e as restantes minúsculas.
- ⚠️ Importante: Para que o select funcione corretamente, a propriedade cujos valores serão exibidos no select, deve se chamar
value, como indicado no exemplo abaixo na tabela de props.
Uso
js
<CdsSelect
:value="value"
:options="options"
width="wide"
label="Séries"
placeholder="Selecione uma das séries"
required
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
label | string | 'Label' | -- | Especifica o título do select. |
placeholder | string | 'Selecione...' | -- | Indica o texto que instrui o usuário a como interagir com o select. |
* options (required) | array | [] | -- | Array de objetos que especifica a lista de opções do select. Os valores a serem mostrado como opções do select devem estar atribuídos a chave `value` do objeto. |
state | string | 'default' | default valid loading invalid | Especifica o estado do Select. As opções são 'default', 'valid', 'loading' e 'invalid'. |
required | boolean | false | -- | Controla a exibição do asterísco indicativo de campo obrigatório. |
errorMessage | string | 'Valor inválido' | -- | Especifica a mensagem de erro, que será exibida caso o estado seja inválido |
searchable | boolean | false | -- | Indica se vai ser possível fazer buscas no select. |
width Deprecated | string | '' | -- | Define a largura do Select. As opções são 'thin', 'default' e 'wide'. |
fluid | boolean | false | -- | Especifica se a largura do select deve ser fluida. |
disabled | boolean | false | -- | Especifica o status de interação do select. |
tooltip | string | null | -- | Define exibição e texto do tooltip do select |
tooltipIcon | string | 'info-outline' | -- | Especifica ícone do tooltip do Select. |
optionsField | string | 'value' | -- | Indica o nome da da chave do objeto a ser considerada na renderização das opções do select. |
returnValue | boolean | false | -- | Quando true, passa a retornar o optionsField no modelValue fora do objeto das opções do select. |
linkText Deprecated | string | null | -- | Essa prop vai ser substituída pela `supportLink` na v4. Define texto do link do input (localizado à direita da label). |
linkUrl Deprecated | string|null | null | -- | Essa prop vai ser substituída pela `supportLinkUrl` na v4. Define a url a ser acessada no clique do link (no caso do link ser exibido). |
supportLink | string | null | -- | Controla a exibição e o conteúdo do link de suporte exibido ao lado da label. |
supportingText | string|array | '' | -- | Especifica mensagem de auxílio. |
supportLinkUrl | string|null | null | -- | Define a url a ser acessada no clique do link de suporte. |
mobile Deprecated | boolean | false | -- | Essa prop vai ser substituída pela prop `floatingLabel` na v4. Define o tipo do input, se true será um input adaptado para o mobile |
floatingLabel | boolean | false | -- | Define o tipo do input, se true será um input adaptado para o mobile |
addable | boolean | false | -- | Indica se vai ser possível adicionar novas opções ao Select. Só tem efeito se a prop `searchable` for `true`. |