PubTextarea

This is a textarea component. It is used to display a textarea element for comment, message, wysiwyg editor, and more.

Default Usage

Your message

<template>
  <pub-textarea
    v-model="message"
    label="Your message"
    placeholder="Write your thoughts here..."
  />
</template>

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

const message = ref('')
</script>

Sizes

Prop - size Usage

The size prop is used to set the size of the textarea. It can be one of the following values: 'sm', 'md', 'lg', 'xl'.

Small

Medium (default)

Large

Extra large

<template>
  <pub-textarea
    v-model="message"
    size="sm"
    label="Small"
    placeholder="Small textarea..."
  />
  <pub-textarea
    v-model="message"
    size="md"
    label="Medium (default)"
    placeholder="Medium textarea..."
  />
  <pub-textarea
    v-model="message"
    size="lg"
    label="Large"
    placeholder="Large textarea..."
  />
  <pub-textarea
    v-model="message"
    size="xl"
    label="Extra large"
    placeholder="Extra large textarea..."
  />
</template>

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

const message = ref('')
</script>

Disabled

Prop - disabled Usage

The disabled prop is used to disable the textarea. It can be a boolean value.

Your message

I like Vuelicity!

<template>
  <pub-textarea
    v-model="message"
    label="Your message"
    placeholder="Write your thoughts here..."
    disabled
  />
</template>

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

const message = ref('I like Vuelicity!')
</script>

Readonly

Prop - readonly Usage

The readonly prop is used to make the textarea readonly. It can be a boolean value.

Readonly input

I like Vuelicity!

Disabled + readonly input

I like Vuelicity!

<template>
  <pub-textarea
    v-model="message"
    label="Readonly input"
    placeholder="Write your thoughts here..."
    readonly
  />
  <pub-textarea
    v-model="message"
    label="Disabled + readonly input"
    placeholder="Write your thoughts here..."
    readonly
    disabled
  />
</template>

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

const message = ref('I like Vuelicity!')
</script>

Validation

Prop - validationStatus and Slot - validationMessage Usage

The validationStatus prop is used to set the visual validation state of the textarea. It can be one of the following values: error, success.

The validationMessage slot is used to display a custom validation message. It can be a string value.

Your message

This field is required.

Your message

Looks good!

<template>
  <pub-textarea
    v-model="message"
    label="Your message"
    placeholder="Write your thoughts here..."
    validation-status="error"
  >
    <template #validationMessage>
      This field is required.
    </template>
  </pub-textarea>
  <pub-textarea
    v-model="message"
    label="Your message"
    placeholder="Write your thoughts here..."
    validation-status="success"
  >
    <template #validationMessage>
      Looks good!
    </template>
  </pub-textarea>
</template>

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

const message = ref('')
</script>

Native Constraints

The required, minlength, and maxlength attributes are supported natively on the textarea element.

Message (10–15 characters)

<template>
  <form
    class="flex flex-col gap-4 w-full"
    @submit.prevent="submitted = true"
  >
    <pub-textarea
      v-model="message"
      :validation-status="validationStatus"
      label="Message (10–15 characters)"
      minlength="10"
      maxlength="15"
      required
    >
      <template
        v-if="validationStatus === 'error'"
        #validationMessage
      >
        {{ message.length === 0 ? 'This field is required.' : `Too short — ${message.length}/10 characters minimum.` }}
      </template>
      <template
        v-if="validationStatus === 'success'"
        #helper
      >
        Looks good!
      </template>
    </pub-textarea>
    <pub-button
      class="self-start"
      type="submit"
      color="blue"
      rounded="md"
    >
      Validate
    </pub-button>
  </form>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { PubButton, PubTextarea } from 'vuelicity'

const message = ref('')
const submitted = ref(false)

const validationStatus = computed(() => {
    if (!submitted.value) return undefined
    return message.value.length >= 10 ? 'success' : 'error'
})
</script>

Comment box

Slot - footer Usage

The footer slot is used to render actions or metadata below the textarea content — commonly used for submit buttons in comment forms.

Your message

<template>
  <pub-textarea
    v-model="message"
    label="Your message"
    placeholder="Write your thoughts here..."
  >
    <template #footer>
      <div class="flex items-center justify-between">
        <pub-button
          type="submit"
          color="blue"
          rounded="lg"
        >
          Post comment
        </pub-button>
        <div class="flex gap-2">
          <pub-icon
            name="attachment"
            size="sm"
          />
          <pub-icon
            name="location"
            size="sm"
          />
          <pub-icon
            name="image"
            size="sm"
          />
        </div>
      </div>
    </template>
  </pub-textarea>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubButton, PubIcon, PubTextarea } from 'vuelicity'

const message = ref('')
</script>

Reference

Properties

Name	Type	Default	Description	Options
autocomplete	String	'off'	The HTML autocomplete attribute for the textarea element.
class	String	''	Additional classes for the wrapper element.
disabled	Boolean	false	Disables the textarea when true.
inputClass	String	''	Additional classes for the textarea element.
label	String	''	The text label displayed above the textarea.
labelClass	String	''	Additional classes for the label element.
placeholder	String	''	The placeholder text displayed when the textarea is empty.
readonly	Boolean	false	Makes the textarea readonly when true.
required	Boolean	false	Marks the textarea as required.
size	String	'md'	The size of the textarea.	'sm', 'md', 'lg', 'xl'

Slots

Name	Description
validationMessage	Slot for custom validation message.
helper	Slot for helper text displayed below the textarea.
footer	Slot for footer content.