Textarea

Multi-line text input component with label and layout support.

Live Demo

Vertical (default)

Biography

Message

This is a default message. You can edit me!

Horizontal

Comment

Inner

Notes

Feedback

Usage

Basic

<template>
  <orio-textarea
    v-model="description"
    label="Description"
    placeholder="Enter description..."
  />
</template>

<script setup>
const description = ref("");
</script>

Horizontal Layout

<orio-textarea
  v-model="comment"
  label="Comment"
  layout="horizontal"
/>

Inner Layout

<orio-textarea
  v-model="notes"
  label="Notes"
  layout="inner"
/>

Props

Prop	Type	Default	Description
modelValue	string	""	Textarea value (v-model)
layout	"vertical" | "horizontal" | "inner"	"vertical"	Label position relative to textarea
label	string	undefined	Label text
placeholder	string	undefined	Placeholder text

All standard HTML textarea attributes are supported via v-bind="$attrs".

Events

Event	Payload	Description
update:modelValue	string	Emitted when textarea value changes

Styling

--color-bg           /* Textarea background */
--color-border       /* Border color */
--color-text         /* Text color */
--color-accent       /* Focus border color */
--color-accent-soft  /* Focus ring color */
--color-muted        /* Placeholder and inner label color */