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.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

INFO

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

Enter your comment

<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.

Your message

<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.

Your message

This is an assistive text

<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.

The custom label

<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.

This is a hint message

This is a hint message

This is a hint message

This is a hint message

---

This is a labelThis is a hint message

This is a labelThis is a hint message

This is a labelThis is a hint message

This is a labelThis is a hint message

<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.

Fixed height textarea

<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.

<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.

<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

This is a label

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

Props

Name	Description	Type	Required	Default	Possible values
model-value	v-model The value of the textarea	T	No	-	-
id	The id of the textarea	string	No	-	-
name	The name of the textarea	string	No	"MazTextarea"	-
label	The label of the textarea	string	No	-	-
placeholder	The placeholder of the textarea	string	No	-	-
required	If the textarea is required	boolean	No	false	-
disabled	If the textarea is disabled	boolean	No	false	-
readonly	If the textarea is readonly	boolean	No	false	-
error	If the textarea has an error	boolean	No	false	-
success	If the textarea has a success	boolean	No	false	-
warning	If the textarea has a warning	boolean	No	false	-
hint	The hint of the textarea	string	No	-	-
color	The color of the textarea	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
rounded-size	Size radius of the component's border	MazRoundedSize	No	'md'	-
size	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.	"xs" | "sm" | "md" | "lg" | "xl" | "mini"	No	'md'	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mini'
padding	If the textarea has a padding	boolean	No	true	-
transparent	If the textarea has a transparent background	boolean	No	false	-
border	If the textarea has no border	boolean	No	true	-
autogrow	If the textarea should autogrow based on its content	boolean	No	true	-
min-rows	Minimum number of rows displayed by the textarea (initial/minimum height). With autogrow enabled, the textarea still grows beyond this with its content.	number	No	3	-
append-justify	The alignment of the append slot	"center" | "end" | "start" | "space-between" | "space-around" | "space-evenly"	No	"end"	'center' | 'end' | 'start' | 'space-between' | 'space-around' | 'space-evenly'
top-label	Static label displayed above the textarea. Unlike the floating label, this remains fixed	string	No	-	-
assistive-text	Helper text displayed below the input to provide additional context or validation feedback	string	No	-	-

Events

Event name	Payload	Description
update:model-value	T | undefined	Emitted when the value of the textarea change
input	T | undefined	Emitted when the value of the textarea change
focus	FocusEvent	Emitted when the textarea is focused
blur	FocusEvent	Emitted when the textarea is blurred
change	Event	Emitted when the textarea value change

Slots

Name	Description	Bindings
label		-
append		-