TextArea

Captures multi-line user input.
stableView sourceRadix Themes
vue
<script setup lang="ts">
import { TextArea } from '@typlog/ui'
</script>

<template>
  <TextArea placeholder="Reply…"></TextArea>
</template>

API Reference ​

PropDefaultType
color
–
Color
modelValue
–
string
radius
–
"none""small""medium""large""full"
resize
–
"none""both""vertical""horizontal"
size
–
"1""2""3"
variant
–
"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>