Textarea

🌏 Translated with the assistance of DeepSeek and ChatGPT

A very, very, very, very, very large amount of text can be entered here.

Basic Usage

You can enter multiple lines of text here. Pass in modelValue to enable controlled mode. If not passed or set to undefined, it will be uncontrolled mode, in which case you can use the defaultValue property as the default value.

Excalibur

!!!

<template>
	<px-space direction="vertical">
		<px-textarea placeholder="Please input" v-model="input"></px-textarea>
		<px-textarea placeholder="Please input" default-value="!!!"></px-textarea>
	</px-space>
</template>

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

const input = ref('Excalibur')
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

Rows

The rows property controls the default number of rows. minRows and maxRows set the minimum and maximum number of rows. When autoResize is true, the height will adjust automatically.

Berserker!

Berserker!

Berserker!

<template>
	<px-space direction="vertical">
		<px-textarea placeholder="Please input" v-model="input" :rows="4"></px-textarea>
		<px-textarea
			placeholder="Please input"
			v-model="input"
			:rows="4"
			:min-rows="2"
			:max-rows="6"
		></px-textarea>
		<px-textarea
			placeholder="Please input"
			v-model="input"
			auto-resize
			:min-rows="2"
			:max-rows="6"
			:rows="4"
		></px-textarea>
	</px-space>
</template>

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

const input = ref('Berserker!')
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

Manual Resize

The resize property controls whether the manual resize handle is shown. It is shown by default.

Text

Text

<template>
	<px-space direction="vertical">
		<px-textarea placeholder="Please input" v-model="input"></px-textarea>
		<px-textarea placeholder="Please input" v-model="input" :resize="false"></px-textarea>
	</px-space>
</template>

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

const input = ref('Text')
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

More Options

Textarea also has some features of the Input component.

Disabled, Readonly, Loading & Clearable

Size

Count

0

0 / 255

Status

Expose

<template>
	<px-space direction="vertical">
		<h4>Disabled, Readonly, Loading & Clearable</h4>
		<px-space>
			<px-textarea placeholder="Please input text" disabled></px-textarea>
			<px-textarea placeholder="Please input text" readonly></px-textarea>
			<px-textarea placeholder="Please input text" loading></px-textarea>
			<px-textarea placeholder="Please input text" clearable></px-textarea>
		</px-space>
		<h4>Size</h4>
		<px-space>
			<px-textarea placeholder="Please input text" size="small"></px-textarea>
			<px-textarea placeholder="Please input text"></px-textarea>
			<px-textarea placeholder="Please input text" size="large"></px-textarea>
		</px-space>
		<h4>Count</h4>
		<px-space>
			<px-textarea placeholder="Please input text" show-count> </px-textarea>
			<px-textarea placeholder="Please input text" show-count :max-length="255"> </px-textarea>
		</px-space>
		<h4>Status</h4>
		<px-space>
			<px-textarea placeholder="Please input text"> </px-textarea>
			<px-textarea placeholder="Please input text" status="success"> </px-textarea>
			<px-textarea placeholder="Please input text" status="warning"> </px-textarea>
			<px-textarea placeholder="Please input text" status="error"> </px-textarea>
		</px-space>
		<h4>Expose</h4>
		<px-space direction="vertical">
			<px-space>
				<px-button theme="info" @click="focusHandler">Focus</px-button>
				<px-button theme="info" @click="blurHandler">Blur</px-button>
				<px-button theme="info" @click="selectHandler">Select</px-button>
				<px-button theme="warning" @click="clearHandler">Clear</px-button>
			</px-space>
			<px-textarea placeholder="Please input" ref="textareaRef"></px-textarea>
		</px-space>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Textarea } from '@pixelium/web-vue'

// If on-demand import
// import { Textarea } from '@pixelium/web-vue/es'

const textareaRef = ref<InstanceType<typeof Textarea>>(null)

const focusHandler = () => {
	textareaRef.value?.focus()
}
const blurHandler = () => {
	textareaRef.value?.blur()
}
const clearHandler = () => {
	textareaRef.value?.clear()
}
const selectHandler = () => {
	textareaRef.value?.select()
}
</script>

<style lang="css" scoped>
.px-textarea {
	width: 320px;
}
</style>

API

TextareaProps

Attribute	Type	Optional	Default	Description	Version
modelValue	string | null	True		Value of the textarea (controlled mode), supports v-model.	0.0.2
defaultValue	string | null	True		Default value of the textarea (uncontrolled mode).	0.0.2
rows	number	True		Default number of rows.	0.0.2
minRows	number	True	1	Minimum number of rows.	0.0.2
maxRows	number	True	Infinity	Maximum number of rows.	0.0.2
autoResize	boolean	True	false	Whether automatic resizing is allowed.	0.0.2
resize	boolean	True	true	Whether manual resizing is allowed.	0.0.2
placeholder	string	True		Placeholder text.	0.0.2
disabled	boolean	True	false	Disabled state.	0.0.2
readonly	boolean	True	false	Read-only state.	0.0.2
clearable	boolean	True	false	Whether to show the clear button.	0.0.2
loading	boolean	True	false	Whether to show the loading state.	0.0.2
size	'medium' | 'large' | 'small'	True	'medium'	Input box size.	0.0.2
maxLength	number	True		Maximum input length.	0.0.2
showCount	boolean	True	false	Whether to show character count.	0.0.2
countGraphemes	(value: string) => number	True		Custom function for counting characters. If only countGraphemes is provided without sliceGraphemes, the maxLength limit will not take effect.	0.0.2
sliceGraphemes	(value: string, limit: number) => string	True		Custom function for slicing the string.	0.0.2
status	'success' | 'warning' | 'error' | 'normal'	True	'normal'	Form validation status.	0.0.2
autofocus	boolean	True	false	Native <input> autofocus attribute.	0.0.2

TextareaEvents

Event	Parameter	Description	Version
input	value: string, e: Event	Callback when the textarea receives input.	0.0.2
update:modelValue	value: string	Callback to update modelValue.	0.0.2
change	value: string, e: Event | undefined	Callback when the input value changes.	0.0.2
clear	value: string	Callback when the clear button is clicked and the content is cleared.	0.0.2
blur	e: FocusEvent	Callback when the textarea loses focus.	0.0.2
focus	e: FocusEvent	Callback when the textarea is focused.	0.0.2

TextareaSlots

Slot	Parameter	Description	Version
count	inputValue: number, currentLength: number, maxLength: number	Slot for displaying character count.	0.0.2

TextareaExpose

Attribute	Type	Optional	Default	Description	Version
focus	() => void	False		Focus the current textarea.	0.0.2
blur	() => void	False		Remove focus from the current textarea.	0.0.2
clear	() => void	False		Clear the current textarea.	0.0.2
select	() => void	False		Select the content of the current textarea.	0.0.2