Textarea

Default

Bind text with v-model for controlled input.

Code copied

<template>
  <s-textarea v-model="text" placeholder="Write something" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
</script>

Label

Float a label above the field for clearer forms.

Code copied

<template>
  <s-textarea v-model="text" label="Description" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
</script>

Counter

Show remaining characters and warn when the limit is exceeded.

Code copied

<template>
  <s-textarea
    v-model="textarea"

    counter="20"
    label="Counter: 20"
  />
</template>

Width

Set a fixed width for form layouts.

Code copied

<template>
  <s-textarea v-model="text" width="300px" label="Fixed width" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
</script>

Height

Control the visible height of the textarea.

Code copied

<template>
  <s-textarea v-model="text" height="120px" label="Taller area" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
</script>

Advanced

Use max-length, show-word-count, auto-size and trim for a bounded, automatically growing field.

API

Code copied

<template>
  <s-textarea
    v-model="value"
    label="Feedback"
    placeholder="Write a short note"
    :max-length="120"
    show-word-count
    trim
    :auto-size="{ minRows: 3, maxRows: 7 }"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')