# Textarea

Free-form text with a counter and adaptive height.

## How to use it

Combine minRows and maxRows with autoResize to fit the content. maxLength sets the field limit.



## Import


```tsx
import { Textarea } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Textarea aria-label="Project description" placeholder="Tell us about your idea…" autoResize minRows={3} maxRows={6} maxLength={200} showCount />
```


## API: Textarea


```typescript
Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| autoComplete | string | No | Tell the browser which autocomplete type to use. |
| autoResize | boolean | No | Adapt field height to its content. |
| autoResizeDirection | "down" \| "up" | No | See the published type. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| invalid | boolean | No | Enable the visual error state. |
| maxLength | number | No | Maximum number of characters. |
| maxRows | number | No | Maximum height in rows. |
| minRows | number | No | Minimum height in rows. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLTextAreaElement, HTMLTextAreaElement> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLTextAreaElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLTextAreaElement> | No | Form submission event. |
| placeholder | string | No | Short hint displayed when there is no value. |
| required | boolean | No | Indicates that a value is required. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| rows | number | No | Number of visible rows in the field. |
| showCount | boolean | No | Show the character counter. |
| size | "default" \| "sm" \| "lg" \| null | No | Visual size of the component. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |

Source: https://kivora.pro/docs/componentes/textarea