Textarea
Write several lines, such as a note, address or biography, in a field that can grow with the text.
<script setup lang="ts">import { ref } from 'vue'import { UiField, UiTextarea } from 'grani' const note = ref('') const address = ref( 'Office 4, 12 Long Harbour Street, Northfield Business Park, second floor. Ring twice at the gate, the reception is on the left past the lifts; after six the door is locked and the parcel goes to the security desk.',)</script> <template> <div class="flex w-80 max-w-full flex-col gap-6"> <UiField label="Note"> <UiTextarea v-model="note" placeholder="Anything the courier should know" /> </UiField> <UiField label="Delivery instructions"> <UiTextarea v-model="address" /> </UiField> </div></template>
Also called multiline input, text area.
Usage
<UiTextarea v-model="value" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValue*string | The text (v-model); empty is ''. | |
| Data | ||
| rowsnumber= 3 | 3 | Visible lines before the user resizes the control. |
| Behavior | ||
| maxlengthnumber | Maximum number of characters. | |
| resizenone | vertical | auto= "vertical" | "vertical" | vertical gives the user a handle; none fixes the height at rows; auto grows with the text. |
| Look | ||
| placeholderstring | Hint shown while empty. Not a replacement for a label. | |
| sizexs | sm | md | Height of one row on the control ladder; defaults to the app's step. | |
| Form and access | ||
| namestring | Native name for forms. | |
| idstring | Own id when standalone. Inside UiField the field's id takes precedence. | |
| readonlyboolean= false | false | Prevents editing while keeping the control focusable. |
| disabledboolean= false | false | Prevents input and interaction. |
| invalidboolean= false | false | Marks the control invalid: red border and halo. Inside UiField the error sets this. |
| requiredboolean= false | false | Standalone only: a value is needed, said to a reader and to a form (native required). Inside UiField the field's required says so. |
| ariaLabelstring | Accessible name when there is no visible label. A prop, not aria-label: the root is the capsule, the name belongs to the control. | |
Attributes: class and style stay on the outer element; the rest (native attributes, aria-*, data-testid) reach the control inside it.
When to use another component
| When you need | Take |
|---|---|
| One line | Input |
| Names added one by one | List field |
| A counter under it | The caller's text in Field #meta |