Select
Select fields components are used for collecting user provided information from a list of options.
API
Components.Selects.
Components.Selects.
Components.Selects.
Habilita focagem automática
Components.Selects.
Aplica o estilo em caixa alternativo para o campo de entrada
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Adicionar a funcionalidade de limpar o input, ícone padrão é usa o clear do Material Icons
Components.Selects.
Cria um contador para o tamanho da entrada. O padrão é 25 se nenhum número for especificado. Não é aplicada nenhuma validação.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Desativa a exibição automática de caracteres ao digitar
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Designa o tipo da entrada com largura total
Define a altura do componente
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Aplica uma máscara personalizada no input. Para mais informações, veja a tabela de máscaras abaixo
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Exibe um texto como prefixo
Components.Selects.
Components.Selects.
Components.Selects.
Retorna a string mascarada não modificada
Components.Selects.
Components.Selects.
Components.Selects.
Label não se move em eventos focus/dirty
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Exibe um texto como sufixo
Seta o tipo do campo de entrada
Components.Selects.
Controla visibilidade
Components.Selects.
Suplementar
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space |
| Pre-made | |
| credit-card | #### - #### - #### - #### |
| date-with-time | ##/##/#### ##:## |
| phone | (###) ### - #### |
| social | ###-##-#### |
| time | ##:## |
| time-with-seconds | ##:##:## |
Exemplos
Light theme
A standard single select has a multitude of configuration options.
Icons
Use a custom prepended or appended icon.
Multiple
A multi-select can utilize v-chip as the display for selected items.
Customized item text and value
You can specify the specific properties within your items array correspond to the text and value fields. By default, this is text and value. In this example we also use the return-object prop which will return the entire object of the selected item on selection.
Prepend/Append item slots
The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.
Change selection appearance
The selection scoped slot can be used to customize the way selected values are shown in the input. This is great when you want something like foo (+20 others) or don't want the selection to occupy multiple lines.