TextInput
TextInputs permitem que os usuários insiram texto em uma interface
Quando usar:
- Necessitar de um campo de texto para inserir informações.
Quando não usar:
- O dado a ser utilizado no componente for numérico.
- Houver a necessidade de selecionar múltiplos itens.
Uso
js
<CdsTextInput
v-model="inputValue"
/>Preview
supportingText
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
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 TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'. |
inputType Deprecated | string | 'text' | text email | Use o componente EmailInput caso precise de um campo para Emails. Especifica o tipo do TextInput. As opções são 'text' e 'email'. |
required | boolean | false | -- | Exibe asterisco de 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 TextInput deve ser fluida. |
mask | string|array | null | -- | Especifica a máscara a ser aplicada ao TextInput. Exemplo: "(##) #####-####" |
tooltip | string | null | -- | Define exibição e texto do tooltip do input |
tooltipIcon | string | 'info-outline' | -- | Especifica ícone do tooltip do TextInput. |
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 | 'https://cuida.framer.wiki/' | -- | 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. |
lazy | boolean | false | -- | Quando true, o v-model é atualizado com o evento `change` no lugar do `input`. |
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 |
disableAutocomplete | boolean | false | -- | Desabilita autocomplete do browser. |