Textarea

17:06

Description

Multi-line text input. border defaults to 'surround' (all four sides) and can be set to 'bottom' (bottom only) / 'none'. Built-in character count (count), auto-height (auto-height), a clear button and disabled / read-only states; placed inside ux-form-item it inherits the item's size and triggers form validation on input / blur.

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Bind content via v-model; border=surround for all-side border.

View source

<template>
    <ux-textarea v-model="value" placeholder="请输入内容" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

Character Count

count=true shows character count; maxlength limits max length.

View source

<template>
    <ux-textarea v-model="value" count :maxlength="100" placeholder="请输入内容" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

Auto Height

auto-height=true adjusts height based on content.

View source

<template>
    <ux-textarea v-model="value" auto-height count placeholder="请输入内容" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

Disabled

disabled=true disables input with gray background.

View source

<template>
    <ux-textarea v-model="value" disabled />
</template>

<script setup lang="uts">
const value = ref<string>('禁用的内容');
</script>

Bottom Border

border=bottom shows only bottom border.

View source

<template>
    <ux-textarea v-model="value" border="bottom" placeholder="请输入内容" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

Sizes

size supports small/default/large presets.

View source

<template>
    <view>
        <ux-textarea v-model="value1" size="small" placeholder="小尺寸文本域" />
        <view class="gap" />
        <ux-textarea v-model="value2" size="large" placeholder="大尺寸文本域" />
    </view>
</template>

<script setup lang="uts">
const value1 = ref<string>('');
const value2 = ref<string>('');
</script>

<style scoped>
.gap {
    height: 10px;
}
</style>

API

Props

Property	Description	Type	Default	Version
customStyle		UTSJSONObject	-	-
customClass		string	''	-
modelValue		string | number	''	-
placeholder	Placeholder text (default '')	string | number	''	-
placeholderClass		string	'input-placeholder'	-
placeholderStyle		string	''	-
height	Height in px (default '', falls back to the size preset)	string | number	''	-
confirmType		string	'done'	-
disabled	Whether the field is disabled (default false)	boolean	false	-
readonly	Whether the field is read-only (default false)	boolean	false	-
count	Whether to show the character count (default false)	boolean	false	-
focus		boolean	false	-
autoHeight		boolean	false	-
fixed		boolean	false	-
cursorSpacing		number	0	-
cursor		string | number	''	-
showConfirmBar		boolean	true	-
selectionStart		number	-1	-
selectionEnd		number	-1	-
adjustPosition		boolean	true	-
disableDefaultPadding		boolean	false	-
holdKeyboard		boolean	false	-
confirmHold		boolean	false	-
maxlength	Maximum input length (default 140)	string | number	140	-
border	Border style (default 'surround'): 'surround' (all four sides), 'bottom' (bottom only), 'none' (no border); true/false are convenience aliases (equivalent to 'surround'/'none')	boolean | BorderType	'surround'	-
ignoreCompositionEvent		boolean	true	-
size		SizeType | string | number	''	-
clearable		boolean	true	-
validateState		boolean	false	-

Events

Event	Description	Params	Version
focus	Fires on focus	value: string	-
blur	Fires on blur	value: string	-
linechange		e: UniTextareaLineChangeEvent	-
input	Fires when the input value changes	value: string	-
confirm	Fires when the keyboard confirm button is tapped	value: string	-
keyboardheightchange		e: UniTextareaKeyboardHeightChangeEvent	-
change	Fires when the input value changes	value: string	-
click	Fires on click	-	-

Slots

ux-textarea has no slots.

Notes

1. border defaults to 'surround' (all four sides), the opposite of ux-input's 'none'; it also accepts 'bottom' / 'none' or the true/false aliases.
2. count shows the character count and maxlength defaults to 140; the count text is pinned to the bottom right.
3. When auto-height is true the field grows with content (min-height), otherwise the height is fixed; when unset the height follows the size preset.
4. clearable defaults to true; the clear icon appears when focused with a non-empty value and not disabled, and hides ~100ms after blur.
5. readonly keeps the style unchanged, stays clickable and still emits click; the component captures clicks with a transparent overlay (a native textarea with disabled blocks click bubbling).
6. show-confirm-bar / hold-keyboard / disable-default-padding / fixed are native textarea attributes mainly targeting WeChat Mini Program and may not take effect on other platforms.
7. Inside ux-form-item, size is inherited from the form item and validate-state ORs with the form item's validation state.