FormTextarea

Textarea dengan floating label, char counter, dan validation pipeline — port langsung dari FormInput minus currency/prefix/suffix/password.

Bagian dari: vue-saform · Family: Notch

FormTextarea adalah versi <textarea> dari FormInput — struktur props, floating label, char counter (maxlength), dan validation pipeline-nya identik, minus fitur khusus FormInput (currency masking, prefix/suffix, password toggle) yang memang tidak relevan untuk teks multi-baris. rows bisa dikustomisasi (default 3). Cocok untuk field seperti bio, catatan, atau deskripsi panjang yang tetap butuh validasi panjang minimum/maksimum.

---

Import

import { FormTextarea } from '@bpmlib/vue-saform';

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { FormTextarea, required, maxLength } from '@bpmlib/vue-saform';

const bio = ref('');
</script>

<template>
  <FormTextarea id="bio" v-model="bio" label="Bio" :rows="4" :maxlength="200" :validation="required()" />
</template>

---

API Reference

NOTE

Floating label/wrapper state dibangun di atas composable internal useFormWrapper, dipakai bersama seluruh Notch family — tidak butuh composable khusus sendiri (struktur props/validation identik dengan FormInput). Lihat Core Concepts di halaman utama.

FormTextarea

Cara Penggunaan:

Root element <div> — child <textarea> menerima seluruh native attrs yang tidak dideklarasikan sebagai prop lewat attrs fallthrough.

Props

Name	Type	Default	Description
id	string	-	Id textarea, juga dipakai sebagai name. Wajib.
label	string	-	Teks floating label
placeholder	string	-
disabled	boolean	false
readonly	boolean	false	Native readonly attribute
required	boolean	false	Native required attribute + built-in rule required()
hasError	boolean	false	Paksa visual error state (border merah) terlepas dari internal validation state
title	string	-	Native title attribute
pattern	string	-	Native pattern attribute + built-in rule pattern()
maxlength	number | string	-	Native maxlength. Saat diset, menampilkan char counter
minlength	number | string	-	Native minlength + built-in rule minLength()
rows	number | string	3	Native rows attribute
validation	ValidationInput<unknown>	-	Custom validation rule(s), jalan bersama built-in checks (required/minlength/pattern)
messages	ValidationMessages	-	Override pesan validasi default, di-shallow-merge
hideValidation	boolean	false	Skip seluruh perhitungan pesan validasi internal

Model

Name	Type	Default	Description
v-model	string | number	''	Value textarea

Events

Name	Payload	Description
change	-	Native change event (fires saat blur setelah value berubah)

Slots

Name	Props	Description
description	-	Baris deskripsi di bawah field
errors	-	Baris pesan error custom, menggantikan pesan validasi bawaan

Exposed

Name	Type	Description
input	Ref<HTMLTextAreaElement | null>	Ref ke elemen <textarea> native
triggerFocus()	() => void	Focus textarea secara programmatic
validate()	() => Promise<boolean>	Jalankan validasi, return true jika valid

Contoh:

<FormTextarea
  id="notes"
  v-model="notes"
  label="Catatan"
  :rows="6"
  :maxlength="500"
>
  <template #description>Maksimal 500 karakter.</template>
</FormTextarea>

---

Examples

1. Char Counter

Counter otomatis muncul saat maxlength diset — tidak butuh state tambahan.

<FormTextarea id="tweet" v-model="tweet" label="Tweet" :maxlength="280" />

2. Custom Rows dengan Validasi Panjang

<FormTextarea id="review" v-model="review" label="Review" :rows="8" :minlength="20" required />

---

Styling

Styling sepenuhnya self-contained — lihat Import CSS di halaman utama. Component akan tampil fully styled langsung setelah import, tanpa setup tambahan.

CSS Variables

Variable	Default	Description
--sa-fm-error-list-style	disc	list-style-type untuk error list. Sama seperti FormInput

---

Related Components

Bagian dari family Notch:

• FormInput — text/number/email/password/currency input
• FormSelect — single/multi-select
• FormDatetime — date/time picker