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"
    id="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>

Props & Event

Props

Prop name	Description	Type	Values	Default
style	Style attribut of the component root element	TSIndexedAccessType	-	undefined
class	Class attribut of the component root element	TSIndexedAccessType	-	undefined
modelValue	@model The value of the textarea	string	-	undefined
id	The id of the textarea	string	-	undefined
name	The name of the textarea	string	-	'MazTextarea'
label	The label of the textarea	string	-	undefined
placeholder	The placeholder of the textarea	string	-	undefined
required	If the textarea is required	boolean	-	false
disabled	If the textarea is disabled	boolean	-	false
readonly	If the textarea is readonly	boolean	-	false
error	If the textarea has an error	boolean	-	false
success	If the textarea has a success	boolean	-	false
warning	If the textarea has a warning	boolean	-	false
hint	The hint of the textarea	string	-	undefined
color	The color of the textarea	Color	-	'primary'

Events

Event name	Properties	Description
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