10. Cómo agregar un área de texto largo en Filament 5 – Capturando notas extensas con Textarea

Hoy vas a agregar el último campo de la FASE 1: un área de texto grande para notas. Olvídate de campos pequeños donde no se ve lo que escribes. Ahora tendrás un textarea expansivo donde los usuarios pueden escribir libremente, con placeholder de ayuda y líneas visibles claras.

🎯 Objetivo de hoy

Agregar un campo de notas extensas usando Textarea::make('notes') con ->placeholder() y ->rows() en CustomerForm.php.

🖥️ Antes / Después

Antes: No hay forma de guardar notas o comentarios sobre el cliente. Si usaras TextInput normal, solo tendrías una línea y no se vería el contenido completo.

Después: Un área de texto grande de 4 líneas de alto con placeholder gris que dice «Ej: Cliente preferente, atención especial…». El usuario puede escribir párrafos completos y ver todo lo que escribe.

📁 Estructura de carpetas (mapa de hoy)

app/Filament/Resources/
└── Customers/                    ⚪ Carpeta del Resource
    ├── CustomerResource.php      ⚪ No lo tocamos hoy
    ├── Pages/                    ⚪ No lo tocamos hoy
    |   ├── CreateCustomer.php   ⚪ No lo tocamos hoy
    |   ├── EditCustomer.php     ⚪ No lo tocamos hoy
    |   └── ListCustomers.php    ⚪ No lo tocamos hoy
    ├── Schemas/
    |   └── CustomerForm.php      🟡 🎯 AQUÍ TRABAJAMOS HOY
    └── Tables/
        └── CustomersTable.php   ⚪ No lo tocamos hoy

Hoy modificamos solo el archivo marcado con 🟡. Los demás archivos existen pero no los tocaremos.

📋 Paso 1: Tu código de ayer

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                TextInput::make('email')
                    ->email(),
                TextInput::make('phone')
                    ->numeric(),
                DatePicker::make('birth_date'),
            ]);
    }
}

➕ Paso 2: Tu ladrillo de hoy (5 líneas)

📄 Ruta: app/Filament/Resources/Customers/Schemas/CustomerForm.php

// 🔧 Implementamos: Área de texto para notas
// Agregamos Textarea con placeholder y altura de 4 líneas
use Filament\Forms\Components\Textarea;

Textarea::make('notes')
    ->placeholder('Ej: Cliente preferente, atención especial...')
    ->rows(4),

El componente Textarea crea un campo de texto multilínea. ->rows(4) define la altura visible y ->placeholder() muestra texto de ayuda que desaparece al escribir.

✅ Paso 3: Código completo con tu ladrillo

📄 Archivo modificado

Ruta completa: app/Filament/Resources/Customers/Schemas/CustomerForm.php

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                TextInput::make('email')
                    ->email(),
                TextInput::make('phone')
                    ->numeric(),
                DatePicker::make('birth_date'),
                Textarea::make('notes')
                    ->placeholder('Ej: Cliente preferente, atención especial...')
                    ->rows(4),
            ]);
    }
}

🎉 Verifica tu magia

Abre tu navegador en /admin/customers/create y deberías ver:

• Un quinto campo llamado «Notes» que es más alto que los demás
• Dentro del campo, texto gris claro: «Ej: Cliente preferente, atención especial…»
• El campo tiene 4 líneas de altura visible
• Puedes escribir párrafos largos y el campo se expande o agrega scroll automáticamente
• El placeholder desaparece completamente al empezar a escribir

¿No ves el campo tan alto? Revisa que hayas agregado ->rows(4) después del placeholder. Si no ves el placeholder, verifica que esté dentro de las comillas simples.

---

💬 ¡Felicidades! Completaste la FASE 1. Tu formulario ahora tiene 5 campos profesionales: nombre (requerido, limitado), email (validado), teléfono (numérico), fecha de nacimiento (calendario) y notas (textarea). Es un formulario completo y usable.

Mañana comenzamos la FASE 2: haremos que tu tabla se vea increíble mostrando estos datos con columnas buscables y ordenables. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Textarea

➡️ Próximo paso: Mostrar la primera columna en la tabla con TextColumn::make('name').