textarea
Textarea é um campo de texto para coletar, editar ou visualizar dados de texto longos.
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
label | Set textarea label | false | undefined | string |
optionalLabel | Set textarea optional label | false | (opcional) | string |
helperText | Text bellow the textarea | false | undefined | string |
maxLength | Max length character counter bellow the textarea | false | undefined | number |
feedback | Textarea feedback style | false | undefined | errorvalid |
showFeedbackIcon | Show Textarea feedback icon | false | true | boolean |
isLoading | Adds a rotating loading indicator on the right. | false | false | boolean |
disabled | Disables typing on the input | false | false | boolean |
readOnly | Disables typing but improve reading | false | false | boolean |
suffix | Input suffix, a string or a component to be used as a suffix | false | undefined | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | ComponentClass<...> | FunctionComponent<...> |
prefix | Input prefix, a string or a component to be used as a prefix | false | undefined | string | ComponentClass<any, any> | FunctionComponent<any> |
*valores gerados automaticamente.
propriedades para estilização (styled props)
Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Usa os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).
Migração do United para Olist Design System
Propriedades
| United | Olist Design System |
|---|---|
| defaultValue | value |
| value | value |
| onChange | onChange |
| minRows | ❌ |
| maxRows | ❌ |
| ❌ | ❌ |
| ❌ | prefix |
| ❌ | suffix |
| ❌ | readOnly |
| disabled | disabled |
| ❌ | label |
| ❌ | optionalLabel |
| ❌ | helperText |
| ❌ | feedback |
| ❌ | showFeedbackIcon |
| ❌ | isLoading |
Exemplos do United com o Design System
United
<Label>
Name <OptionalField>optional</OptionalField>
</Label>
<Textarea placeholder="e.g John Smith" />
<Textarea append={<Icon name="lock-outline" />} prepend={<Icon name="lock-outline" />} />Equivalente no Design System
demo interativa
Uma versão de interativa do componente desenvolvido.