Formulir & Masukan
Textarea (Area Teks Panjang)
Kolom masukan multibaris untuk deskripsi keluhan pengaduan warga, catatan tambahan, atau kronologi permohonan.
Textarea (.mjl-textarea) digunakan untuk menerima teks panjang lebih dari satu baris, seperti laporan pengaduan layanan publik atau keterangan domisili.
1. Pratinjau Textarea
Pratinjau Textarea dengan Penghitung Karakter
Jelaskan sedetail mungkin agar petugas lapangan dapat menindaklanjuti.
0 / 500
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<div class="mjl-form-field">
<label class="mjl-label" for="laporan">Rincian Laporan</label>
<textarea id="laporan" name="laporan" class="mjl-textarea" rows="4" maxlength="500"
aria-describedby="laporan-help"></textarea>
<p id="laporan-help" class="mjl-help-text">Maksimal 500 karakter.</p>
</div>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlFormField, MjlTextarea } from '@majalengka/vue';
const laporan = ref('');
</script>
<template>
<MjlFormField id="laporan" label="Rincian Laporan" :help-text="`${laporan.length}/500 karakter`">
<template #default="{ id, describedBy }">
<MjlTextarea :id="id" v-model="laporan" :rows="4" :maxlength="500" :described-by="describedBy" />
</template>
</MjlFormField>
</template>
import { useState } from 'react';
export function FieldLaporan() {
const [laporan, setLaporan] = useState('');
return (
<div className="mjl-form-field">
<label className="mjl-label" htmlFor="laporan">Rincian Laporan</label>
<textarea id="laporan" className="mjl-textarea" rows={4} maxLength={500}
value={laporan} onChange={(e) => setLaporan(e.target.value)} aria-describedby="laporan-help" />
<p id="laporan-help" className="mjl-help-text">{laporan.length}/500 karakter</p>
</div>
);
}
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-field-laporan',
standalone: true,
template: `
<div class="mjl-form-field">
<label class="mjl-label" for="laporan">Rincian Laporan</label>
<textarea id="laporan" class="mjl-textarea" rows="4" maxlength="500" aria-describedby="laporan-help"
(input)="laporan.set($any($event.target).value)"></textarea>
<p id="laporan-help" class="mjl-help-text">{{ laporan().length }}/500 karakter</p>
</div>
`,
})
export class FieldLaporan {
laporan = signal('');
}
<div class="mjl-form-field">
<label class="mjl-label" for="laporan">Rincian Laporan</label>
<textarea id="laporan" name="laporan" rows="4" maxlength="500" aria-describedby="laporan-help"
@class(['mjl-textarea', 'mjl-textarea--error' => $errors->has('laporan')])>{{ old('laporan') }}</textarea>
<p id="laporan-help" class="mjl-help-text">Maksimal 500 karakter.</p>
</div>
<div class="mjl-form-field">
<label class="mjl-label" for="laporan">Rincian Laporan</label>
<textarea id="laporan" name="laporan" class="mjl-textarea" rows="4" maxlength="500"
aria-describedby="laporan-help"><?= htmlspecialchars($_POST['laporan'] ?? '', ENT_QUOTES, 'UTF-8') ?></textarea>
<p id="laporan-help" class="mjl-help-text">Maksimal 500 karakter.</p>
</div>