Textarea

Basic textarea

Value: ""

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <FuiTextarea v-model="value" placeholder="Enter text..." rows="3" />
</template>

Appearance

<FuiTextarea v-model="value" placeholder="Outline" />
<FuiTextarea v-model="value" appearance="filled-darker" placeholder="Filled darker" />
<FuiTextarea v-model="value" appearance="filled-lighter" placeholder="Filled lighter" />

Size

<FuiTextarea v-model="value" size="small" placeholder="Small" />
<FuiTextarea v-model="value" size="medium" placeholder="Medium" />
<FuiTextarea v-model="value" size="large" placeholder="Large" />

States

Read-only content

<FuiTextarea placeholder="Disabled" disabled />
<FuiTextarea placeholder="Readonly" readonly />
<FuiTextarea placeholder="Invalid" invalid />

With icon slots

<FuiTextarea v-model="value" placeholder="Before icon">
  <template #contentBefore>
    <svg><!-- icon --></svg>
  </template>
</FuiTextarea>
<FuiTextarea v-model="value" placeholder="After icon">
  <template #contentAfter>
    <svg><!-- icon --></svg>
  </template>
</FuiTextarea>

Props

Prop	Type	Default	Description
modelValue	string	''	v-model value
placeholder	string	''	Placeholder text
disabled	boolean	false	Disabled state
readonly	boolean	false	Read-only state
invalid	boolean	false	Error state
rows	number	3	Visible rows
size	small | medium | large	medium	Input size
appearance	outline | filled-darker | filled-lighter	outline	Visual style
resize	none | both | horizontal | vertical	vertical	Resize direction

Slots

Slot	Description
contentBefore	Icon before textarea
contentAfter	Icon after textarea