TextArea
Captures multi-line user input.
vue
<script setup lang="ts">
import { TextArea } from '@typlog/ui'
</script>
<template>
<TextArea placeholder="Reply…"></TextArea>
</template>API Reference
| Prop | Default | Type |
|---|---|---|
| color | – | |
| modelValue | "" | string |
| radius | – | "none""small""medium""large""full" |
| resize | – | "both""horizontal""none""vertical" |
| size | "2" | "1""2""3" |
| variant | "surface" | "soft""surface" |
Examples
Size
vue
<script setup lang="ts">
import { TextArea } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<TextArea placeholder="Reply…" size="1"></TextArea>
<TextArea placeholder="Reply…" size="2"></TextArea>
<TextArea placeholder="Reply…" size="3"></TextArea>
</div>
</template>Variant
vue
<script setup lang="ts">
import { TextArea } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<div class="flex gap-4">
<TextArea placeholder="Reply…" variant="surface"></TextArea>
<TextArea placeholder="Reply…" variant="surface" disabled></TextArea>
</div>
<div class="flex gap-4">
<TextArea placeholder="Reply…" variant="soft"></TextArea>
<TextArea placeholder="Reply…" variant="soft" disabled></TextArea>
</div>
</div>
</template>Color
vue
<script setup lang="ts">
import { TextArea } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<TextArea placeholder="Reply…" variant="soft" color="indigo"></TextArea>
<TextArea placeholder="Reply…" variant="soft" color="green"></TextArea>
<TextArea placeholder="Reply…" variant="soft" color="red"></TextArea>
</div>
</template>Radius
vue
<script setup lang="ts">
import { TextArea } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<TextArea placeholder="Reply…" radius="none"></TextArea>
<TextArea placeholder="Reply…" radius="small"></TextArea>
<TextArea placeholder="Reply…" radius="medium"></TextArea>
<TextArea placeholder="Reply…" radius="large"></TextArea>
<TextArea placeholder="Reply…" radius="full"></TextArea>
</div>
</template>Resize
vue
<script setup lang="ts">
import { TextArea } from '@typlog/ui'
</script>
<template>
<div class="flex flex-col gap-4">
<TextArea placeholder="Reply…" resize="none"></TextArea>
<TextArea placeholder="Reply…" resize="horizontal"></TextArea>
<TextArea placeholder="Reply…" resize="vertical"></TextArea>
<TextArea placeholder="Reply…" resize="both"></TextArea>
</div>
</template> Last updated Sep 15, 2026