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

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

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

<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"	No	undefined	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
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	-
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'

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