A multi-line field.
Import it from rei-kit:
import { BaseTextarea } from 'rei-kit'
Open BaseTextarea in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseTextarea } from 'rei-kit'
const note = ref('')
</script>
<template>
<BaseTextarea v-model="note" label="Note" :rows="4" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
modelValue | string | undefined | The text, with `v-model`. |
label | string | yes | |
error | string | '' | |
hint | string | '' | |
labelHidden | boolean | false | |
rows | number | 4 | |
size | 'sm' | 'md' | 'md' | `sm` tightens the label and the spacing. It does **not** shrink the text: iOS zooms the viewport when it focuses a field under 16px and never zooms back, which is why both phone apps force 16px on form elements in their base layer. |
variant | 'default' | 'unstyled' | 'default' | `unstyled` keeps the wiring and drops the surface. The label, the generated id, `aria-describedby` and the error are what a field is; the border and the height are what it looks like. A search box inside a bordered row, a url field in an editor popover — those places were hand-writing the whole thing to avoid the appearance, and losing the wiring with it. The same reasoning as `BaseButton`'s `unstyled`, and the same test: a primitive is finished when the app can take its behaviour without its paint. |
fieldId | string | undefined | Ties the generated id to a name you choose, so `ErrorSummary` can link to this field. Its links point at nothing without it, and the kit's own `FormField` has taken one since 2.22.0 while the fields built on it did not — which left building a form out of these and summarising its errors impossible without hand-writing the control. |
controlClass | string | undefined | Classes for the control itself, rather than for the field around it. `class` lands on the field, because that is where Vue puts a component's class and because a layout class means "space this field". That leaves `variant="unstyled"` with no way to paint the control it just stripped — the point of stripping it — which is why an app with a large amount field wrote the whole thing by hand instead. It appends, so with the default variant a conflict is settled by Tailwind's own order rather than by writing it here; reach for it with `unstyled`, where there is nothing to settle. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.