# Textarea

Campo de várias linhas. Passa pelo `Field.Control` da Base UI como o `Input`,
então rótulo, ajuda e erro se ligam sozinhos dentro de um `Field`.

Não tem variante de tamanho: altura aqui e número de linhas, e misturar isso com
a escala de controle criaria um `lg` que não quer dizer nada.

## No React Native

Traduz: `rows` é a altura inicial e o campo cresce com o conteúdo, como no web, que também não tem variante de tamanho.

**`onChangeText`, e não `onValueChange`, e isso é o par e não o desvio.** No catálogo nativo `onValueChange` é de quem é dono do valor: `Select`, `Combobox`, `Slider`, `Calendar`, `MaskedInput`, `SearchInput`, `InputGroup`, todas leem o texto cru e entregam outra coisa. `Input` e `Textarea` não entregam outra coisa: são o `TextInput` da plataforma com a borda da casa, e o `TextInput` chama `onChangeText` com a string.

A regra é essa, e vale para as duas: **campo cru fala `onChangeText`; peça que transforma o valor fala `onValueChange`**. Dar `onValueChange` só ao `Textarea` quebraria o par com o `Input`, que é o que o `Field` alterna sem a tela mudar de contrato, e deixaria o `forText` (o quarto adaptador do `@rivocode/ui-native/form`, que existe exatamente para esses dois) certo para um e errado para o outro.

## Importação

```tsx
import { Textarea } from '@rivocode/ui'
```

## Exemplos

### Com rótulo

```tsx
import { Field, FieldDescription, FieldLabel, Textarea } from '@rivocode/ui'

export function WithLabel() {
  return (
    <Field className="w-80">
      <FieldLabel>Observação</FieldLabel>
      <Textarea placeholder="O que o cliente pediu" />
      <FieldDescription>Aparece no corpo da nota.</FieldDescription>
    </Field>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `defaultValue` | `string \| number \| readonly string[]` |  | 0.4.0 |  |
| `onValueChange` | `((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void)` |  | 0.4.0 | Callback fired when the `value` changes. |
| `render` | `ComponentRenderFn<HTMLProps, FieldControlState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `rows` | `number` |  | 0.4.0 | Quantas linhas o campo mostra antes de rolar. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)