7. Cómo limitar caracteres en campos de texto en Filament 5 – Control de longitud para datos limpios

Hoy vas a ponerle un límite a la creatividad de tus usuarios. Agregarás una restricción de longitud máxima que evita que alguien escriba un nombre de 500 caracteres o un email interminable. Tu base de datos te lo agradecerá.

🎯 Objetivo de hoy

Agregar límite de 255 caracteres al campo name usando ->maxLength(255) en CustomerForm.php.

🖥️ Antes / Después

Antes: Un usuario podría pegar accidentalmente un texto enorme en el campo nombre, causando errores de base de datos o datos desordenados.

Después: El campo name tiene un contador visual que muestra «0/255». Cuando el usuario se acerca al límite, el contador cambia de color. Si intenta escribir más, simplemente no le deja.

📁 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\TextInput;
use Filament\Schemas\Schema;

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

➕ Paso 2: Tu ladrillo de hoy (1 línea)

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

// 🔧 Implementamos: Límite de caracteres para name
// Agregamos ->maxLength(255) para limitar el nombre a 255 caracteres
TextInput::make('name')
    ->required()
    ->maxLength(255),

El método ->maxLength(255) crea un límite visual y de validación. El usuario verá un contador «0/255» debajo del campo.

✅ 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\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(),
            ]);
    }
}

🎉 Verifica tu magia

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

• Debajo del campo «Name» aparece un pequeño contador: «0/255»
• Escribe un nombre corto → El contador aumenta normalmente
• Intenta pegar un texto largo (más de 255 caracteres) → El campo corta automáticamente al llegar al límite
• El contador cambia a color ámbar cuando te acercas al límite

¿No ves el contador? Revisa que hayas agregado ->maxLength(255) después de ->required() en el campo name.

---

💬 ¿Viste ese contador aparecer? Con solo una línea, tu formulario ahora es más amigable y profesional. Los usuarios saben exactamente cuánto pueden escribir.

Mañana agregaremos un campo numérico para el teléfono. ¿Te animas a seguir construyendo?

📖 Fuente: Filament Forms Validation

➡️ Próximo paso: Agregar campo numérico para teléfono con ->numeric().