PasswordInput
PasswordInputs permitem que os usuários insiram caracteres sensíveis na interface.
Quando usar:
- Necessitar de um campo de texto para inserir informações sensíveis, como uma senha.
Quando não usar:
- O dado a ser utilizado no componente for um dado comum (Exemplo: nome ou idade).
Uso
js
<CdsPasswordInput
v-model="inputValue"
/>
Preview
Props
Nome | Tipo | Default | Opções | Descrição |
---|---|---|---|---|
modelValue | string | '' | -- | Prop utilizada como v-model. |
label | string | 'Label' | -- | Especifica a label do input. |
disabled | boolean | false | -- | Desabilita o input. |
state | string | 'default' | default valid loading invalid | Especifica o estado do PasswordInput. As opções são 'default', 'valid', 'loading' e 'invalid'. |
required | boolean | false | -- | Exibe asterisco de campo obrigatório (obs.: não faz a validação). |
placeholder | string | 'Digite aqui a informação' | -- | Especifica o placeholder do input. |
errorMessage | string | 'Valor inválido' | -- | Especifica a mensagem de erro, que será exibida caso o estado seja inválido. |
fluid | boolean | false | -- | Especifica se a largura do PasswordInput deve ser fluida. |
tooltip | string | null | -- | Define exibição e texto do tooltip do input |
tooltipIcon | string | 'info-outline' | -- | Especifica ícone do tooltip do TextInput. |
mobile | boolean | false | -- | Define o tipo do input, se true será um input adaptador para o mobile |
Eventos
Nome | Descrição |
---|---|
@update:modelValue | Evento utilizado para implementar o v-model. |
Slots
Nome | Descrição |
---|---|
#label |