Textarea

Basic Usage

Textarea

<script setup>
import { Textarea } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'
const text = useModel('')
</script>

<template>
    <Textarea v-model="text" label="Textarea"/>
</template>

Props

Placeholder

placeholder: string

<Textarea placeholder="Textarea"/>

Max

max: string

The maximum string length that can be entered into the textarea.

<Textarea max="10" placeholder="Up to 10 characters"/>

Text align

text-align: ('left' | 'center' | 'right') = 'left'

<Textarea text-align="left" placeholder="Left"/>
<Textarea text-align="center" placeholder="Center"/>
<Textarea text-align="right" placeholder="Right"/>

Rows

rows: string

<Textarea rows="5" placeholder="Five rows"/>

Resize

resize: boolean

<Textarea resize placeholder="Resizable"/>

Float label

float-label: boolean

<Textarea label="Textarea" float-label/>

​

Textarea

NOTE

float-label only works if the placeholder and description props are unset.

Underline

underline: boolean

Theme

theme: theme = 'brand'

Size

size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'

Radius

radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'md'

Spacing

spacing: ('compact' | 'expanded') = ''

Disabled

disabled: boolean

Elements

element	tag	description
input	<textarea>	Textarea's underlying textarea element.

Anatomy

<div.form-field.textarea/>

<div.form-field-label-wrapper/>

<label.form-field-label/>

<span.form-field-hint/>

<p.form-field-details.form-field-description/>

<div.textarea-wrapper/>

<textarea/>

<label/>

<p.form-field-details.form-field-help/>

API Reference

Props

prop	type	default
value	string	''
placeholder	string	''
max	string
text-align	'left' | 'center' | 'right'	'left'
rows	string
resize	boolean
disabled	boolean
label	string
hint	string
description	string
help	string
float-label	boolean	false
underline	boolean	false
showErrros	boolean
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'
spacing	'' | 'compact' | 'extended'	''
validator	Function
eagerValidation	boolean
elements	object
validationDelay	number	300

Configuration options

Textarea's configuration options allow to overwrite some Textarea props' default values and may be overwritten under the textarea root-level configuration option.

textarea.<option>	type	default	global
underline	boolean
validationDelay	number		✅
theme	theme		✅
size	size		✅
radius	radius		✅
spacing	spacing		✅