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

Props, Event & Slots

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	T	-	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'
roundedSize	Size radius of the component's border @values 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	union	-
padding	If the textarea has a padding @default true	boolean	-	true
transparent	If the textarea has a transparent background @default false	boolean	-	false
border	If the textarea has no border @default false	boolean	-	true
appendJustify	The alignment of the append slot @values 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' @default 'end'	union	-	'end'

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