2. Cómo agregar tu primer campo de texto en Filament 5: el nombre del cliente

Ayer generaste tu Resource y viste una tabla vacía. Hoy vamos a darle vida. En esta lección agregarás tu primer campo de texto: el nombre del cliente. Es un pequeño input, pero verás cómo Filament lo convierte en algo profesional automáticamente. Al final de esta lección tendrás un formulario donde puedes escribir «Juan Pérez» y guardarlo.

🎯 Objetivo de hoy

Agregar un campo de texto llamado name en el formulario de Customer.

🖥️ Antes / Después

Antes: El formulario de «New customer» está vacío, solo ves el botón «Create» sin campos.

Después: Verás un campo de texto con etiqueta «Name» donde puedes escribir el nombre del cliente.

📁 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

Recuerdas el archivo que se generó automáticamente. Hoy lo abrimos para agregarle tu primer campo.

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

<?php

namespace App\Filament\Resources\Customers\Schemas;

use Filament\Schemas\Schema;

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                //
            ]);
    }
}

Fíjate en el // dentro de components. Ahí es donde van los campos. Ahora está vacío, pero ahí pondremos tu primer ladrillo.

➕ Paso 2: Tu ladrillo de hoy (una sola línea nueva)

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

// 🔧 Implementamos: campo de texto para el nombre del cliente
TextInput::make('name'),

Esta línea le dice a Filament: «Quiero un campo de texto llamado name». Filament automáticamente le pone la etiqueta «Name», lo hace bonito y lo guarda en la base de datos.

✅ Paso 3: Código completo con tu ladrillo

📄 Archivo del formulario actualizado

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

<?php

namespace App\Filament\Resources\Customers\Schemas;

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

class CustomerForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                // ✅ Implementado: campo de texto para el nombre del cliente
                TextInput::make('name'),
            ]);
    }
}

¿Viste el cambio? Solo agregamos use Filament\Forms\Components\TextInput; arriba y TextInput::make('name') dentro del array. Eso es todo.

🎉 Verifica tu magia

Abre tu navegador y sigue estos pasos:

1. Ve a http://tuproyecto.test/admin/customers
2. Haz clic en el botón «New customer»
3. ¡Verás un campo de texto con etiqueta «Name»!
4. Escribe «Juan Pérez» en el campo
5. Haz clic en «Create»
6. Deberías volver a la tabla y ver «Juan Pérez» en la lista

Si el campo no aparece, revisa que:

• Guardaste el archivo (Ctrl+S o Cmd+S)
• La columna name existe en tu tabla de base de datos (migration)

¿Lo ves? ¡Acabas de crear tu primer formulario funcional!

---

💬 ¿Viste cómo apareció ese campo mágicamente? Con una sola línea, Filament hizo todo el trabajo pesado: la etiqueta, el estilo, el guardado en base de datos. Mañana aprenderemos a hacer que este campo sea obligatorio, para que nadie pueda crear un cliente sin nombre. ¿Te animas a seguir construyendo?

📖 Fuente oficial: Documentación de Filament 5 — Text Input

➡️ Próximo paso: Mañana haremos que el nombre sea obligatorio con ->required(). Verás cómo Filament valida automáticamente que no dejen el campo vacío.