Menu
Documentation
v4.0.0-beta.4

Textarea

<BaseTextarea /> · A user rich text, an editable field.

View SourceOpen Issue
vue
<template>
  <BaseTextarea
    v-model="value"
    placeholder="Write a message..."
  />
</template>

<script setup lang="ts">
const value = ref('')
</script>

Features

  • Handles model binding
  • Color customization
  • Sizes and radius support

Anatomy

This component is self closing and can be used to create a textarea field. You can customize the input's visual style by using the available props.

vue
<template>
  <BaseTextarea />
</template>

API Reference

This component has props that you can use to modify its visual style and behavior.

Model Type
model-value
string
Prop Type
id
default:-
string

The form input identifier.

placeholder
default:""
string

The placeholder text for the textarea.

rows
default:-
string | number

The number of rows to display in the textarea.

resize
default:-
boolean

Whether to allow the user to resize the textarea.

autogrow
default:-
boolean

Whether to automatically grow the textarea as text is entered.

max-height
default:-
number

The maximum height of the textarea when autogrow is enabled.

variant
default:"default"
"default" | "muted"

The variant of the textarea.

rounded
default:"md"
"none" | "sm" | "md" | "lg" | "full"

The radius of the textarea.

size
default:"md"
"sm" | "md" | "lg" | "xl"

The size of the input.

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Default input variables */
  --color-input-default-border: var(--color-muted-300);
  --color-input-default-bg: var(--color-white);
  --color-input-default-text: var(--color-muted-600);
  --color-input-default-placeholder: var(--color-muted-300);
  --color-input-default-button-bg: var(--color-muted-100);
  --color-input-default-button-bg-active: var(--color-muted-200);
  --color-input-default-button-text: var(--color-muted-700);

  /* Muted input variables */
  --color-input-muted-border: var(--color-muted-300);
  --color-input-muted-bg: var(--color-muted-50);
  --color-input-muted-text: var(--color-muted-600);
  --color-input-muted-placeholder: var(--color-muted-300);
  --color-input-muted-button-bg: var(--color-muted-200);
  --color-input-muted-button-bg-active: var(--color-muted-300);
  --color-input-muted-button-text: var(--color-muted-700);
}

Examples

Variants

Use the variant prop to change the color of the textarea.

vue
<template>
  <BaseTextarea
    v-model="value"
    variant="muted"
    rounded="md"
    placeholder="Ex: Write a message..."
  />
</template>

<script setup lang="ts">
const value = ref('')
</script>

Radius

Use the rounded prop to change the border radius of the textarea.

vue
<template>
  <BaseTextarea
    v-model="value"
    rounded="lg"
    placeholder="Write a message..."
  />
</template>

<script setup lang="ts">
const value = ref('')
</script>

Error

Use the aria-invalid prop to set the textarea in an error state.

vue
<template>
  <BaseTextarea
    v-model="value"
    placeholder="Write a message..."
    aria-invalid="true"
  />
</template>

<script setup lang="ts">
const value = ref('')
</script>

Disabled

Use the disabled prop to set the textarea in a disabled state.

vue
<template>
  <BaseTextarea
    v-model="value"
    placeholder="Write a message..."
    disabled
  />
</template>

<script setup lang="ts">
const value = ref('')
</script>

Text

Theme Toggle