Textarea

Multi-line text input with character count, auto-resize, and validation.

Open in Storybook

Interactive Demo

Message

0/200

Show char count Disabled

States

Input states

Default

With Error

This field is required

Disabled

Cannot edit this

Usage

<script setup>
import { ref } from 'vue';
import { Textarea } from '@yellowcard/b2b-design-system';

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

<template>
  <Textarea
    v-model="message"
    label="Message"
    placeholder="Type your message..."
    :maxLength="500"
    showCharCount
  />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	string	—	Text value (v-model)
size	'large' | 'small'	'large'	Input size
label	string	—	Label text
placeholder	string	—	Placeholder text
helperText	string	—	Helper text below input
errorMessage	string	—	Error message (activates error state)
disabled	boolean	false	Disabled state
readonly	boolean	false	Read-only state
required	boolean	false	Required indicator
skeleton	boolean	false	Skeleton loading
rows	number	—	Visible text rows
maxLength	number	—	Maximum character count
showCharCount	boolean	false	Show character counter
autoResize	boolean	false	Auto-resize height

Events

Event	Payload	Description
update:modelValue	string	Value changed
focus	FocusEvent	Input focused
blur	FocusEvent	Input blurred