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.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

INFO

This component has the "autogrow" feature, so when the user writes, the textarea expands automatically

Basic usage

Enter your comment

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

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

  const value = ref()
</script>

With label and append slots

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

The custom label

<MazTextarea
  v-model="value"
  name="comment"
>
  <template #label>
    <MazIcon name="envelope" class="maz-text-xl" />
    <span class="maz-ml-2">
      The custom label
    </span>
  </template>
</MazTextarea>

With hint and state

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

This is a hint messageThis is a hint messageThis is a hint messageThis 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
  />
</template>

Disabled

This is a label