Textarea

Multi-line field with the same focus treatment as Field. Grows with its content by default. With maxlength, a counter ring fills, turns warning at 90 percent, and nudges at the limit.

Preview

Open in the playground

Usage

TextareaExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzTextarea } from '@chrisdalbano/forza-ui'
const notes = ref<string>('')
</script>

<template>
  <FzTextarea v-model="notes" label="Build notes" :maxlength="140" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
label	string	Yes	None
hint	string | undefined	No	None
error	string | undefined	No	None
placeholder	string | undefined	No	None
disabled	boolean | undefined	No	None
rows	number | undefined	No	3
maxlength	number | undefined	No	None
autosize	boolean | undefined	No	true
modelValue	string	Yes	None

Events and state

v-model (string)

• update:modelValue: [value: string]

Slots

none

Add from source

forza add textarea

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.