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 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 name="envelope" class="maz-text-xl" />
      <span class="maz-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="maz-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" />

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
style	Style attribut of the component root element	Native type	No	undefined	-
class	Class attribut of the component root element	Native type	No	undefined	-
model-value	v-model	T	No	undefined	-
id	The id of the textarea	string	No	undefined	-
name	The name of the textarea	string	No	'MazTextarea'	-
label	The label of the textarea	string	No	undefined	-
placeholder	The placeholder of the textarea	string	No	undefined	-
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	undefined	-
color	The color of the textarea	MazColor	No	'primary'	-
rounded-size	Size radius of the component's border	"none" | "sm" | "md" | "lg" | "xl" | "full" | "base"	No	undefined	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'base'
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	-
append-justify	The alignment of the append slot	"start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"	No	'end'	'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
top-label	Static label displayed above the textarea. Unlike the floating label, this remains fixed	string	No	undefined	-

Events

Event name	Properties	Description
update:model-value	value string | undefined - The value of the textarea	Emitted when the value of the textarea change
input	value string | undefined - The value of the textarea	Emitted when the value of the textarea change
focus	value Event - The event	Emitted when the textarea is focused
blur	value Event - The event	Emitted when the textarea is blurred
change	value Event - The event	Emitted when the textarea value change

Slots

Name	Description	Bindings
Label	Replace the label
Append	Replace the append