Textarea
O componente Textarea
representa um campo de texto com múltiplas linhas. Geralmente utilizado em formulários para coletar comentários, revisões ou feedback's.
Importação
import { Textarea } from '@escaletech/delta'
Utilização
Status
Você pode definir o status do Textarea entre success
, warning
e error
.
Ícones de Status
Você pode substituir os ícones de status do componente Textarea utilizando a propriedade statusIcon
.
No exemplo acima estamos usando a popular biblioteca de icones react-icons, mas você também pode usar seus próprios ícones como no exemplo abaixo:
import { ReactComponent as MeuIcone } from 'caminho_do_svg'
<Textarea label="Descrição" status="success" statusIcon={{ success: <MeuIcone />}} />
Mensagem de ajuda
A propriedade helperText
pode ser usada para fornecer feedback ao usuário sobre o erro, alerta ou ajuda.
Você também pode inserir um link no helperText
.
Veja que a cor do texto depende do status
do Textarea
.
Disabled
Utilize a propriedade disabled
para desabilitar o TextArea. O valor padrão é false
.
Customização
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de customização do tema.
import { extendsTheme } from '@escaletech/delta'
export const theme = extendsTheme({
colors: {
// customiza as cores de fundo e texto do componente
formFieldBackgroundColorDisabled: 'red',
formFieldLabelColor: 'gray'
},
fonts: {
// customiza a familia de fonte do componente
formFieldFontFamily: 'Georgia'
}
})
Tokens
Token | Descrição |
---|---|
colors.formFieldBackgroundColorDisabled | Cor de fundo quando o componente está desabilitado |
colors.formFieldBorderColor | Cor da borda do componente |
colors.formFieldBorderColorHover | Cor da borda quando o cursor do mouse está sobre o componente |
colors.formFieldBorderColorInputed | Cor da borda quando o componente está em foco |
colors.formFieldBorderColorDisabled | Cor da borda quando o componente está desabilitado |
colors.formFieldColorDisabled | Cor do texto quando o componente está desabilitado |
colors.formFieldColor | Cor do valor do input |
colors.formFieldLabelColor | Cor do texto da label do input |
colors.formFieldLabelColorHover | Cor do texto da label quando o cursor do mouse está sobre o componente |
colors.formFieldLabelColorActive | Cor do texto da label quando o componente está em foco |
colors.formFieldSuccessColor | Cor de sucesso |
colors.formFieldWarningColor | Cor de atenção |
colors.formFieldErroColor | Cor de erro |
fonts.formFieldFontFamily | Família de fontes de texto do componente |
Props
Propriedade | Descrição | Tipo | Padrão | Obrigatório |
---|---|---|---|---|
disabled | Se for true , o componente será desabilitado. | boolean | false | ❌ |
label | Define o texto da label do componente | string | - | ✅ |
status | Define status do componente | 'success', 'error', 'warning' | - | ❌ |
statusIcon | Define o ícone exibido de acordo com o status do componente | { 'success': ReactNode, 'error': ReactNode, 'warning': ReactNode } | - | ❌ |
helperText | Define mensagem de ajuda do componente | string | - | ❌ |
Aceita todos as propriedades suportados por TextArea
nativos.