---
title: "MazTextarea"
description: "MazTextarea is a standalone component that replaces the standard html textarea input with a beautiful design system. Many options like colors, disabled, error, warning, success and error messages are available."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-textarea"
---

# MazTextarea

> MazTextarea is a standalone component that replaces the standard html textarea input with a beautiful design system. Many options like colors, disabled, error, warning, success and error messages are available.

- Package: `maz-ui`
- Import: `import MazTextarea from 'maz-ui/components/MazTextarea'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-textarea

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

**Note:**

This component uses the native CSS `field-sizing: content` property for autogrow - the textarea expands automatically as the user types, with zero JavaScript overhead.

## Basic usage

```vue
<script lang="ts" setup>
import MazTextarea from 'maz-ui/components/MazTextarea'
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <MazTextarea
    v-model="value"
    name="comment"
    label="Enter your comment"
  />
</template>
```

## With top-label

You can use the `top-label` attribute to display a top label above the textarea.

```html
<MazTextarea
  v-model="value"
  top-label="Your message"
  placeholder="Type your message..."
/>
```

## With assistive text

You can use the `assistive-text` attribute to display a assistive text below the textarea.

```html
<MazTextarea
  v-model="value"
  top-label="Your message"
  placeholder="Type your message..."
  assistive-text="This is an assistive text"
/>
```

## With label and append slots

You can use the `label` and `append` slots to customize the label and the append element.

```vue
<script lang="ts" setup>
import { useToast } from 'maz-ui/composables'
import { ref } from 'vue'

const value = ref<string>()

const toast = useToast()

function sendMessage() {
  toast.success('Message sent', {
    position: 'top-right',
  })
  value.value = ''
}
</script>

<template>
  <MazTextarea
    v-model="value"
    name="comment"
  >
    <template #label>
      <MazIcon icon="/envelope.svg" class="text-xl" />
      <span class="ms-2">
        The custom label
      </span>
    </template>
    <template #append>
      <MazBtn icon="paper-airplane" size="sm" @click="sendMessage" />
    </template>
  </MazTextarea>
</template>
```

## With hint and state

You can use the `hint` attribute to display a hint message. This will replace the label.

```vue
<template>
  <MazTextarea
    v-model="value"
    name="comment"
    label="This is a label"
    hint="This is a hint message"
  />
  <MazTextarea
    v-model="value"
    name="comment"
    label="This is a label"
    hint="This is a hint message"
    error
  />
  <MazTextarea
    v-model="value"
    name="comment"
    label="This is a label"
    hint="This is a hint message"
    success
  />
  <MazTextarea
    v-model="value"
    name="comment"
    label="This is a label"
    hint="This is a hint message"
    warning
  />
  <hr class="my-4">
  <MazTextarea
    v-model="value"
    name="comment"
    top-label="This is a label"
    hint="This is a hint message"
  />
  <MazTextarea
    v-model="value"
    name="comment"
    top-label="This is a label"
    hint="This is a hint message"
    error
  />
  <MazTextarea
    v-model="value"
    name="comment"
    top-label="This is a label"
    hint="This is a hint message"
    success
  />
  <MazTextarea
    v-model="value"
    name="comment"
    top-label="This is a label"
    hint="This is a hint message"
    warning
  />
</template>
```

## Disable autogrow

By default, the textarea automatically expands as the user types. You can disable this behavior with the `autogrow` prop set to `false` - the textarea will then have a fixed height with a manual resize handle.

```html
<MazTextarea v-model="value" name="comment" label="Fixed height textarea" :autogrow="false" />
```

## Minimum rows (compact / input-like)

Use the `min-rows` prop to control the initial (minimum) height of the textarea. It defaults to `3` lines. Set it to `1` to make the textarea start at the height of a regular input while keeping the autogrow behavior: it grows line by line as the user types.

```vue
<template>
  <MazTextarea
    v-model="value"
    name="comment"
    :min-rows="1"
    rounded-size="xl"
    placeholder="Send your message"
  />
</template>
```

## Sizes

The `size` prop controls the padding (height) and text size of the textarea, mirroring the `MazInput` sizes (`mini`, `xs`, `sm`, `md`, `lg`, `xl`). Combined with `:min-rows="1"`, a given size matches the height of a `MazInput` of the same size, while keeping the autogrow behavior.

```vue
<template>
  <MazTextarea v-model="value" name="comment" size="xs" :min-rows="1" placeholder="Size xs" />
  <MazTextarea v-model="value" name="comment" size="sm" :min-rows="1" placeholder="Size sm" />
  <MazTextarea v-model="value" name="comment" size="md" :min-rows="1" placeholder="Size md" />
  <MazTextarea v-model="value" name="comment" size="lg" :min-rows="1" placeholder="Size lg" />
  <MazTextarea v-model="value" name="comment" size="xl" :min-rows="1" placeholder="Size xl" />
</template>
```

## Disabled

```html
<MazTextarea v-model="value" name="comment" label="This is a label" disabled />
```

## MazTextarea API

`import MazTextarea from 'maz-ui/components/MazTextarea'`

### Props

- `model-value` (`T`, `v-model`): The value of the textarea.
- `id` (`string`): The id of the textarea.
- `name` (`string`, default: `"MazTextarea"`): The name of the textarea.
- `label` (`string`): The label of the textarea.
- `placeholder` (`string`): The placeholder of the textarea.
- `required` (`boolean`, default: `false`): If the textarea is required.
- `disabled` (`boolean`, default: `false`): If the textarea is disabled.
- `readonly` (`boolean`, default: `false`): If the textarea is readonly.
- `error` (`boolean`, default: `false`): If the textarea has an error.
- `success` (`boolean`, default: `false`): If the textarea has a success.
- `warning` (`boolean`, default: `false`): If the textarea has a warning.
- `hint` (`string`): The hint of the textarea.
- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the textarea.
- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size radius of the component's border.
- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`, default: `'md'`): Controls the padding (height) and text size of the textarea, mirroring MazInput sizes. Combined with `minRows`, e.g. `size="md" :min-rows="1"` matches a regular input height.
- `padding` (`boolean`, default: `true`): If the textarea has a padding.
- `transparent` (`boolean`, default: `false`): If the textarea has a transparent background.
- `border` (`boolean`, default: `true`): If the textarea has no border.
- `autogrow` (`boolean`, default: `true`): If the textarea should autogrow based on its content.
- `min-rows` (`number`, default: `3`): Minimum number of rows displayed by the textarea (initial/minimum height). With autogrow enabled, the textarea still grows beyond this with its content.
- `append-justify` (`"center" | "end" | "start" | "space-between" | "space-around" | "space-evenly"`, default: `"end"`): The alignment of the append slot.
- `top-label` (`string`): Static label displayed above the textarea. Unlike the floating label, this remains fixed.
- `assistive-text` (`string`): Helper text displayed below the input to provide additional context or validation feedback.

### Events

- `@update:model-value` (payload: `T | undefined`): Emitted when the value of the textarea change
- `@input` (payload: `T | undefined`): Emitted when the value of the textarea change
- `@focus` (payload: `FocusEvent`): Emitted when the textarea is focused
- `@blur` (payload: `FocusEvent`): Emitted when the textarea is blurred
- `@change` (payload: `Event`): Emitted when the textarea value change

### Slots

- `#label`
- `#append`