Campo optimizado para números telefónicos
tel() hace eso: abre el teclado correcto en móviles para que escribir un teléfono sea fácil.
¿Qué hace tel()?
Marca el campo como tipo «tel» (teléfono). En computadoras se ve normal, pero en celulares abre el teclado numérico, facilitando escribir números de teléfono.
💡 No valida el formato automáticamente, solo optimiza la experiencia en móviles.
¿Cuándo usarlo?
Para cualquier campo que espere un número de teléfono: teléfono fijo, celular, fax, etc.
📍 Archivo: app/Filament/Resources/ClienteResource.php
📝 ESTE ES EL CÓDIGO QUE VAMOS A APRENDER:
📍 Archivo: app/Filament/Resources/ClienteResource.php
TextInput::make('telefono')
->label('Teléfono')
->tel()
->placeholder('+34 612 345 678'),🔍 Vamos a entender línea por línea (como si fuera la primera vez):
TextInput::make('telefono')→ Creamos un campo de texto para el teléfono. El nombre del campo en la base de datos sería «telefono».
->label('Teléfono')→ La etiqueta que aparece encima del campo.
->tel()→ Aquí está lo importante: marca el campo como tipo teléfono. En móviles, abre el teclado numérico.
->placeholder('+34 612 345 678')→ Un ejemplo de cómo debería escribir el teléfono. Ayuda al usuario a saber el formato esperado.
📊 TextInput normal vs tel():
| Característica | Sin tel() | Con tel() |
|---|---|---|
| Teclado en móvil | Completo (letras y números) | Numérico para teléfonos |
| Validación | Ninguna | Ninguna (solo tipo) |
| Experiencia móvil | Regular | Optimizada |
👆 tel() mejora la experiencia en dispositivos móviles.
Validar el formato del teléfono
tel() no valida el formato. Si quieres validarlo, usa regex:
TextInput::make('telefono')
->tel()
->regex('/^[+]?[0-9\s]{9,15}$/')
->validationMessages([
'regex' => 'Ingresa un teléfono válido',
]),💡 El regex acepta números de 9 a 15 dígitos, con o sin + al inicio.
📁 ¿Quieres ver el código completo del archivo? (opcional)
Esto es solo para que veas dónde va tu código. No necesitas memorizar todo esto:
// app/Filament/Resources/ClienteResource.php
public static function form(Form $form): Form
{
return $form
->schema([
TextInput::make('nombre')
->required(),
TextInput::make('email')
->email()
->required(),
TextInput::make('telefono')
->label('Teléfono')
->tel()
->placeholder('+34 612 345 678'),
]);
}🎉 ¿Qué aprendimos hoy?
->tel()marca el campo como tipo teléfono- En móviles abre el teclado numérico especial
- No valida el formato automáticamente
- Combínalo con regex() si necesitas validar el formato
¡Ahora tus formularios son más amigables en móviles! Siguiente lección: url() para enlaces web.