TextInput: un espacio para escribir texto corto. Una línea, nada más.
Es el componente más básico de todos. Lo usarás para nombres, emails, teléfonos, direcciones cortas… Cualquier cosa que quepa en una sola línea.
¿Qué es TextInput exactamente?
Es un campo de texto de una sola línea. Como los inputs normales de HTML, pero con superpoderes de Filament. Puedes agregarle validaciones, formatos, iconos, y mucho más. Pero empecemos por lo básico.
💡 TextInput es como el pan de cada día en formularios. Lo usarás en el 90% de tus campos.
La estructura básica
Para crear un TextInput, necesitas dos cosas: el componente y el nombre del campo. El nombre debe coincidir con la columna de tu base de datos.
📝 ESTE ES EL CÓDIGO QUE VAMOS A APRENDER:
📍 Archivo: app/Filament/Resources/Productos/Schemas/ProductoForm.php
TextInput::make('nombre')🔍 Vamos a entender línea por línea:
TextInput → Es la clase que crea el campo de texto. Piensa en ella como el «tipo» de campo.
::make() → Es el método que «fabrica» el campo. Siempre se usa así. Es como decir «hazme un TextInput».
'nombre' → El nombre del campo. DEBE coincidir con la columna en tu base de datos. Si tu tabla tiene una columna nombre, aquí pones 'nombre'.
📊 Tu tabla productos tiene esta columna:
| id | nombre | precio |
|---|---|---|
| 1 | Laptop Dell | 999.99 |
👆 El TextInput se conecta con esta columna automáticamente
¿Dónde va este código?
En el archivo del formulario, dentro del método components(). Mira:
📁 ¿Quieres ver el código completo del archivo? (opcional)
Esto es solo para que veas dónde va tu código:
<?php
namespace App\Filament\Resources\Productos\Schemas;
use Filament\Forms\Components\TextInput; // 👈 No olvides importar
use Filament\Schemas\Schema;
class ProductoForm
{
public static function configure(Schema $schema): Schema
{
return $schema->components([
TextInput::make('nombre'), // 👈 TU CÓDIGO VA AQUÍ
]);
}
}¡No olvides el import!
Al principio de tu archivo, necesitas decirle a PHP que vas a usar TextInput. Sin esto, el código no funciona:
use Filament\Forms\Components\TextInput;¿Cómo se ve en el panel?
Cuando entres a crear un producto, verás una etiqueta «Nombre» y una caja de texto vacía donde puedes escribir. ¡Eso es todo! Ya tienes tu primer campo funcionando.
🎉 ¿Qué aprendimos hoy?
TextInput::make('campo')crea un campo de texto de una línea- El nombre debe coincidir con la columna de tu base de datos
- Necesitas importar
use Filament\Forms\Components\TextInput; - Es el componente más básico y el que más usarás
- Se usa para nombres, emails, teléfonos, cualquier texto corto
En la siguiente lección vamos a hacer que el campo sea obligatorio con required(). ¡Nos vemos! 🚀