BaseTextarea

import BaseTextarea from "@wikicasa-dev/components/UIKit/BaseTextarea";

Use for free-text messages: contact-the-agency forms, listing descriptions, personal notes on a property. For a single line use BaseInput.

Only these attributes reach the <textarea>: id, data-cy, rows, disabled, readonly, plus required (adds the label asterisk). class styles the textarea itself; wrapper-classes styles the outer wrapper.

#Usage

<script setup lang="ts">
import { computed, ref } from "vue";
import BaseTextarea from "@wikicasa-dev/components/UIKit/BaseTextarea";

const message = ref("");
const tooShort = computed(() => message.value.length > 0 && message.value.length < 20);
</script>

<template>
  <BaseTextarea
    id="contact-agency-message"
    v-model="message"
    label-text="Messaggio per l'agenzia"
    rows="5"
    required
    :is-valid="tooShort ? false : null"
    :feedback="{ invalid: 'Scrivi almeno 20 caratteri' }"
  />
</template>

#Do / Don't

• Do always pass an id: the textarea gets no generated id, and without one the floating label is not linked to it.
• Do always set labelText; it starts inline and floats when the field is focused or filled.
• Do use isValid as tri-state: null neutral, true blue, false red. feedback.valid / feedback.invalid show only in the matching state; pass a single string (HTML allowed).
• Do set resize to let the user resize the box vertically; it is off by default.
• Don't pass placeholder, maxlength or name: they are not forwarded to the textarea. Enforce length limits in your own logic.
• Don't expect required to block submit: it is visual only.

#Styling hooks

• labelClasses for the floating label; class for the textarea (padding, height); wrapper-classes for spacing around the field.
• Exposed methods for read-only "edit on focus" note patterns: disableTextarea(), focusDisabledTextarea(), clearTextareaElem().

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
labelText	string	""
feedback	FeedbackLabels
isValid	Nullable<boolean>	null
resize	boolean	false
labelClasses	ClassTypeProp
modelValue	string	""

Events

Name	Payload
update:modelValue	[value: string | undefined]
click	[MouseEvent]
keydown	[KeyboardEvent]
focusin
focusout

v-model

• v-model binds modelValue (string)

Slots

None.

Exposed (template ref)

Name	Type
disableTextarea	() => void
clearTextareaElem	() => void
focusDisabledTextarea	() => void