Controla qué tan ancho es tu campo de texto
cols() define qué tan ancho es tu área de texto.
¿Qué significa «cols»?
«Cols» viene de «columns» (columnas). Define el ancho en número de caracteres. cols(40) significa «ancho para 40 caracteres por línea».
💡 Es una medida aproximada, no exacta. Depende de la fuente que use el navegador.
¿Cuándo usar cols()?
En Filament, normalmente los campos se adaptan al contenedor. Pero a veces quieres un textarea más angosto, por ejemplo para código postal o textos cortos.
📍 Archivo: app/Filament/Resources/ClienteResource.php
📝 ESTE ES EL CÓDIGO QUE VAMOS A APRENDER:
📍 Archivo: app/Filament/Resources/ClienteResource.php
Textarea::make('direccion')
->label('Dirección completa')
->rows(2)
->cols(40),🔍 Vamos a entender línea por línea (como si fuera la primera vez):
Textarea::make('direccion')→ Creamos un textarea para la dirección. Las direcciones suelen necesitar 2-3 líneas.
->label('Dirección completa')→ La etiqueta que ve el usuario. «Completa» sugiere que incluya todo: calle, número, ciudad…
->rows(2)→ Dos líneas de alto. Suficiente para una dirección típica.
->cols(40)→ El ancho equivale a 40 caracteres. Es más angosto que el ancho completo del formulario.
📊 rows vs cols: las dos dimensiones
| Método | Controla | Unidad | Ejemplo |
|---|---|---|---|
| rows(4) | ALTO | Líneas de texto | 4 renglones visibles |
| cols(50) | ANCHO | Caracteres aprox. | 50 caracteres de ancho |
👆 rows = alto vertical, cols = ancho horizontal.
Valores típicos de cols()
// Textarea angosto (para códigos, números)
->cols(20)
// Textarea medio (direcciones, textos cortos)
->cols(40)
// Textarea ancho (descripciones largas)
->cols(60)
// Sin cols(): ocupa todo el ancho disponible
// (lo más común en Filament)💡 En la práctica, casi nunca necesitas cols(). Filament adapta el ancho automáticamente.
📁 ¿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(),
// Textarea con alto y ancho definidos
Textarea::make('direccion')
->label('Dirección completa')
->rows(2)
->cols(40),
]);
}🎉 ¿Qué aprendimos hoy?
->cols(40)define el ancho en caracteres aproximados- Es el complemento de rows() (alto vs ancho)
- En Filament, normalmente no necesitas usarlo
- Útil cuando quieres un textarea más angosto que el formulario
¡Ya dominas las dos dimensiones del textarea! En la siguiente lección veremos autosize(), que hace todo esto automático.