Textarea

Neobrutalist-styled multi-line text input with variants, sizes, and v-model.

Demo

Preview

变体

尺寸

状态

这是一段只读内容，用户可以选中和复制文本，但无法修改。

v-model 绑定

值：

Installation

pnpm dlx brutx-vue@latest add textarea

Usage

<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'

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

<template>
    <Textarea v-model="message" placeholder="Type your message here..." />
</template>

With Label

<script setup>
import { ref } from 'vue'
import { Textarea, Label } from 'brutx-ui-vue'

const bio = ref('')
</script>

<template>
    <div class="space-y-2">
        <Label for="bio">Bio</Label>
        <Textarea id="bio" v-model="bio" placeholder="Tell us about yourself..." />
    </div>
</template>

Disabled State

<script setup>
import { Textarea } from 'brutx-ui-vue'
</script>

<template>
    <Textarea disabled placeholder="Disabled textarea" />
</template>

Readonly State

Set a readonly textarea via the readonly prop. In readonly state, the textarea is not editable but remains focusable for text selection. The cursor style is cursor-default, and opacity is not reduced (unlike disabled).

<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'

const content = ref('This is readonly content. Users can select and copy text but cannot modify it. Suitable for displaying agreement terms, history records, etc.')
</script>

<template>
    <Textarea v-model="content" readonly />
</template>

Error Messages

Use variant="error" and errorMessage to show an error below the textarea. The message uses role="alert" for screen reader announcements.

<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'

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

<template>
    <Textarea
        v-model="message"
        variant="error"
        error-message="A message is required"
        placeholder="Enter a message..."
    />
</template>

Variants

Variant	Description
default	Standard border
error	Destructive border with primary focus shadow
success	Success border with secondary focus shadow

Set different border styles via the variant prop:

<template>
    <Textarea variant="default" placeholder="Default variant" />
    <Textarea variant="error" placeholder="Error variant" />
    <Textarea variant="success" placeholder="Success variant" />
</template>

Sizes

Size	Padding	Font Size
sm	px-3 py-2	text-sm
default	px-4 py-3	text-base
lg	px-5 py-4	text-lg

Set different sizes via the size prop:

<template>
    <Textarea size="sm" placeholder="Small size" />
    <Textarea size="default" placeholder="Default size" />
    <Textarea size="lg" placeholder="Large size" />
</template>

Programmatic Control

Access the component instance via ref to call the following methods:

<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'

const textareaRef = ref(null)

function handleFocus() {
    textareaRef.value?.focus()
}
</script>

<template>
    <Textarea ref="textareaRef" placeholder="Click button to focus" />
    <button @click="handleFocus">Focus Textarea</button>
</template>

API Reference

Textarea — Props

Name	Type	Default	Description
modelValue	string | undefined	undefined	The textarea string value, synchronized through v-model.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:11 packages/ui/src/components/textarea/Textarea.vue
variant	"default" | "error" | "success" | undefined	"default"	The textarea border and state style. The error variant displays an error message when errorMessage is non-empty.
Details Declared type NonNullable<"default" | "success" | "error" | null | undefined> | undefined Literal values "default" "error" "success" Default value details Declaration 'default' Source: packages/ui/src/components/textarea/Textarea.vue Resolved value "default" Source Textarea.vue:12 packages/ui/src/components/textarea/Textarea.vue
size	"default" | "lg" | "sm" | undefined	"default"	The textarea size variant, controlling its height, padding, and text size.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/textarea/Textarea.vue Resolved value "default" Source Textarea.vue:13 packages/ui/src/components/textarea/Textarea.vue
resize	"both" | "horizontal" | "none" | "vertical" | undefined	"none"	The directions in which the browser allows the user to resize the textarea.
Details Declared type NonNullable<"vertical" | "horizontal" | "none" | "both" | null | undefined> | undefined Literal values "both" "horizontal" "none" "vertical" Default value details Declaration 'none' Source: packages/ui/src/components/textarea/Textarea.vue Resolved value "none" Source Textarea.vue:14 packages/ui/src/components/textarea/Textarea.vue
disabled	boolean | undefined	false	Disables the native textarea, preventing focus and editing.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/textarea/Textarea.vue Resolved value false Source Textarea.vue:15 packages/ui/src/components/textarea/Textarea.vue
readonly	boolean | undefined	false	Prevents editing while retaining focus, text selection, and copying.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/textarea/Textarea.vue Resolved value false Source Textarea.vue:16 packages/ui/src/components/textarea/Textarea.vue
placeholder	string | undefined	undefined Runtime fallback:Uses the localized textarea.placeholder message when omitted.	Hint text displayed when the textarea is empty.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Runtime fallback Uses the localized textarea.placeholder message when omitted. Applied by the component under the documented runtime conditions. Source Textarea.vue:17 packages/ui/src/components/textarea/Textarea.vue
errorMessage	string | undefined	undefined	The error message displayed below the textarea with role="alert" when variant is error and the text is non-empty.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:19 packages/ui/src/components/textarea/Textarea.vue
ariaLabel	string | undefined	undefined	The accessible name passed to the native textarea.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:21 packages/ui/src/components/textarea/Textarea.vue
ariaLabelledby	string | undefined	undefined	The ID of the element labeling the native textarea.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:23 packages/ui/src/components/textarea/Textarea.vue
ariaDescribedby	string | undefined	undefined	The description element ID; when omitted and an error is shown, automatically references the error message.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:25 packages/ui/src/components/textarea/Textarea.vue
ariaInvalid	boolean | undefined	undefined	Explicitly sets the invalid state. When omitted, it is true while an error message is displayed.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:27 packages/ui/src/components/textarea/Textarea.vue
ariaErrormessage	string | undefined	undefined	The error message element ID, also used for the built-in error message. When omitted, the built-in message uses an automatically generated ID.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:29 packages/ui/src/components/textarea/Textarea.vue
ariaRequired	boolean | undefined	undefined	Declares the required state of the textarea to assistive technology.
Details Declared type boolean | undefined Literal values false true Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:31 packages/ui/src/components/textarea/Textarea.vue
class	string | undefined	undefined	Custom CSS classes merged onto the native textarea element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/textarea/Textarea.vue Resolved value undefined Source Textarea.vue:32 packages/ui/src/components/textarea/Textarea.vue

Textarea — Events

Name	Signature or type	Description
@update:modelValue	[value: string]	Emits the new string value on user input. Intermediate IME composition values are suppressed, and the final value is committed when composition ends.
Details Declared type [value: string] Source Textarea.vue packages/ui/src/components/textarea/Textarea.vue

Textarea — Exposes

Name	Signature or type	Description
focus	() => void | undefined	Moves focus to the native textarea.
Details Declared type () => void | undefined Source Textarea.vue:84 packages/ui/src/components/textarea/Textarea.vue
blur	() => void | undefined	Removes focus from the native textarea.
Details Declared type () => void | undefined Source Textarea.vue:85 packages/ui/src/components/textarea/Textarea.vue
select	() => void | undefined	Selects the text in the native textarea.
Details Declared type () => void | undefined Source Textarea.vue:86 packages/ui/src/components/textarea/Textarea.vue
ref	Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>	The internal native textarea reference. Vue unwraps top-level refs on public component instances, so the instance ref property provides the HTMLTextAreaElement.
Details Declared type Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null> Literal values null Source Textarea.vue packages/ui/src/components/textarea/Textarea.vue

Accessibility

• ARIA attributes: Supports aria-label, aria-labelledby, aria-describedby, aria-invalid, aria-required attributes for assistive technologies (e.g. screen readers)

<script setup>
import { ref } from 'vue'
import { Textarea } from 'brutx-ui-vue'

const bio = ref('')
</script>

<template>
    <Textarea
        v-model="bio"
        aria-label="Bio"
        aria-required="true"
        aria-invalid="false"
        placeholder="Enter your bio..."
    />
</template>

Customization

Textarea defaults to resize-none. To allow resizing, override with a custom class:

<script setup>
import { Textarea } from 'brutx-ui-vue'
</script>

<template>
    <Textarea class="resize-y" placeholder="Resizable textarea" />
</template>