TextArea
TextAreas permitem que os usuários insiram um texto longo em uma interface.
Quando usar:
- Necessitar de um campo de texto para inserir informações grandes. Exemplo: Descrição de produto ou mensagens.
Quando não usar:
- For necessário informar apenas um dado específico ao campo de texto.
Uso
js
<CdsTextArea
v-model="inputValue"
/>Preview
supportingTex
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
label | string | 'Label' | -- | Especifica a label do textarea. |
required | boolean | false | -- | Exibe asterisco que indica campo obrigatório (Obs: Não faz a validação) |
placeholder | string | 'Digite aqui a descrição' | -- | Especifica o placeholder do textarea. |
disabled | boolean | false | -- | Desabilita o input do textarea. |
state | string | 'default' | default valid loading invalid | Especifica o estado do textarea. As opções são 'default', 'valid', 'invalid' e 'loading'. |
errorMessage | string | 'Valor inválido' | -- | Especifica a mensagem de erro que será exibida, caso o estado do textarea seja inválido. |
supportingText | string|array | '' | -- | Especifica mensagem de auxílio. |
supportLink | string | '' | -- | Controla a exibição e o conteúdo do link de suporte exibido ao lado da label. |
supportLinkUrl | string|null | null | -- | Define a url a ser acessada no clique do link de suporte. |
fluid | boolean | false | -- | Especifica se a largura do textarea deve ser fluida. |
lazy | boolean | false | -- | Quando true, o v-model é atualizado com o evento `change` no lugar do `input`. |
tooltip | string | null | -- | Define exibição e texto do tooltip do input |
tooltipIcon | string | 'info-outline' | -- | Especifica ícone do tooltip do TextInput. |
floatingLabel | boolean | false | -- | Define o tipo do input, se true será um input adaptado para o mobile |