Permite que los Clientes te Digan Más

A veces un menú desplegable no es suficiente. Los clientes pueden tener instrucciones específicas: "Entra por la puerta lateral," "Alérgico a ciertos fertilizantes," o "Por favor llama antes de llegar." Un textarea para notas les da espacio para compartir detalles.

Lo que Aprenderás

Enlazar valores de textarea
Agregar límites de caracteres
Mostrar caracteres restantes
Hacer que los textareas se redimensionen automáticamente

Enlace Básico de Textarea

Los textareas se enlazan igual que los inputs:

<script>
  let notes = $state('');
</script>

<label for="notes">Additional Notes (Optional)</label>
<textarea 
  id="notes"
  bind:value={notes}
  placeholder="Any special instructions or requests..."
></textarea>

<p>Notes: {notes || 'None provided'}</p>

El bind:value mantiene el contenido del textarea sincronizado con el estado.

Agregar un Límite de Caracteres

Evita notas excesivamente largas:

<script>
  let notes = $state('');
  const maxLength = 500;
  
  let remaining = $derived(maxLength - notes.length);
  let isOverLimit = $derived(notes.length > maxLength);
</script>

<label for="notes">Additional Notes (Optional)</label>
<textarea 
  id="notes"
  bind:value={notes}
  placeholder="Any special instructions or requests..."
  maxlength={maxLength}
></textarea>

<p class="char-count" class:warning={remaining < 50} class:error={isOverLimit}>
  {remaining} characters remaining
</p>

<style>
  .char-count {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
  }
  
  .char-count.warning {
    color: #f59e0b;
  }
  
  .char-count.error {
    color: #ef4444;
  }
</style>

El atributo maxlength impide escribir más allá del límite. El contador de caracteres proporciona retroalimentación.

Aplicar el Límite Sin el Atributo

Si quieres un manejo personalizado en lugar del maxlength nativo:

<script>
  let notes = $state('');
  const maxLength = 500;
  
  function handleInput(event) {
    const value = event.target.value;
    if (value.length <= maxLength) {
      notes = value;
    } else {
      // Trim to max length
      notes = value.slice(0, maxLength);
      // Force the textarea to show trimmed value
      event.target.value = notes;
    }
  }
</script>

<textarea 
  value={notes}
  oninput={handleInput}
  placeholder="Any special instructions..."
></textarea>

Este enfoque te permite agregar comportamiento personalizado cuando se alcanza el límite.

Textarea con Redimensionamiento Automático

Haz que el textarea crezca conforme el usuario escribe:

<script>
  let notes = $state('');
  let textarea;
  
  function autoResize() {
    if (textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = textarea.scrollHeight + 'px';
    }
  }
  
  $effect(() => {
    // Resize whenever notes change
    notes;
    autoResize();
  });
</script>

<textarea 
  bind:this={textarea}
  bind:value={notes}
  oninput={autoResize}
  placeholder="Any special instructions..."
  rows="3"
></textarea>

<style>
  textarea {
    resize: none;
    overflow: hidden;
    min-height: 80px;
  }
</style>

bind:this nos da una referencia al elemento del DOM, lo que nos permite manipular su altura.

Agregar al Formulario de Reserva

Aquí está la sección completa de notas:

<!-- filename: src/lib/components/BookingForm.svelte (partial) -->
<script>
  let notes = $state('');
  const maxLength = 500;
  
  let remaining = $derived(maxLength - notes.length);
</script>

<fieldset>
  <legend>Additional Information</legend>
  
  <div class="field">
    <label for="notes">
      Special Instructions (Optional)
    </label>
    <textarea 
      id="notes"
      name="notes"
      bind:value={notes}
      placeholder="Examples:
• Gate code: 1234
• Please text before arriving
• Dog is friendly but loud
• Specific areas to focus on"
      maxlength={maxLength}
      rows="4"
    ></textarea>
    <p class="char-count" class:warning={remaining < 50}>
      {remaining} characters remaining
    </p>
  </div>
</fieldset>

<style>
  textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
  }
  
  textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }
  
  textarea::placeholder {
    color: #999;
  }
  
  .char-count {
    font-size: 0.875rem;
    color: #666;
    margin: 0.25rem 0 0 0;
    text-align: right;
  }
  
  .char-count.warning {
    color: #f59e0b;
  }
</style>

El Formulario de Reserva Completo

Con todos los campos en su lugar, aquí está la estructura completa del formulario:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  // Contact information
  let customerName = $state('');
  let customerEmail = $state('');
  let customerPhone = $state('');
  
  // Appointment details
  let bookingDate = $state('');
  let selectedTime = $state('');
  
  // Service selection
  let selectedService = $state('');
  let selectedAddOns = $state([]);
  
  // Additional info
  let notes = $state('');
  let agreeToTerms = $state(false);
  
  // Form state
  let submitted = $state(false);
  
  function handleSubmit(event) {
    event.preventDefault();
    submitted = true;
    // In a later module, we'll send this to the server
  }
  
  function resetForm() {
    customerName = '';
    customerEmail = '';
    customerPhone = '';
    bookingDate = '';
    selectedTime = '';
    selectedService = '';
    selectedAddOns = [];
    notes = '';
    agreeToTerms = false;
    submitted = false;
  }
</script>

{#if submitted}
  <div class="confirmation">
    <h2>✓ Booking Request Received!</h2>
    <p>Thank you, {customerName}! We'll confirm your booking shortly.</p>
    <button onclick={resetForm}>Book Another Service</button>
  </div>
{:else}
  <form onsubmit={handleSubmit}>
    <fieldset>
      <legend>Contact Information</legend>
      <!-- Name, email, phone fields -->
    </fieldset>
    
    <fieldset>
      <legend>Appointment Details</legend>
      <!-- Date and time fields -->
    </fieldset>
    
    <fieldset>
      <legend>Select a Service</legend>
      <!-- Service radio buttons -->
    </fieldset>
    
    <fieldset>
      <legend>Add-Ons (Optional)</legend>
      <!-- Add-on checkboxes -->
    </fieldset>
    
    <fieldset>
      <legend>Additional Information</legend>
      <!-- Notes textarea -->
    </fieldset>
    
    <label class="terms">
      <input type="checkbox" bind:checked={agreeToTerms} required />
      I agree to the terms and conditions
    </label>
    
    <button type="submit" disabled={!agreeToTerms}>
      Request Booking
    </button>
  </form>
{/if}

Errores Comunes

Usar el Atributo value en Lugar de un Enlace

<!-- ❌ Content won't update with state -->
<textarea value={notes}></textarea>

<!-- ✅ Use bind:value for two-way sync -->
<textarea bind:value={notes}></textarea>

Olvidar font-family

/* ❌ Textarea has different default font */
textarea {
  font-size: 1rem;
}

/* ✅ Match the rest of your form */
textarea {
  font-size: 1rem;
  font-family: inherit;
}

No Establecer min-height

/* ❌ Textarea can be squished too small */
textarea {
  resize: vertical;
}

/* ✅ Ensure minimum usable height */
textarea {
  resize: vertical;
  min-height: 100px;
}

¡Módulo Completo! 🎉

Has terminado el Módulo 6: Enlace de Datos. El formulario de reserva ahora tiene:

Inputs de texto para nombre y correo electrónico
Selector de fecha para la fecha de la cita
Menú desplegable para el horario
Selección de servicio con botones de radio
Casillas de verificación para complementos
Textarea para notas
Casilla de verificación de términos

Lo que has aprendido:

bind:value para inputs de texto, correo electrónico y fecha
bind:value para menús desplegables select
bind:group para botones de radio y grupos de casillas de verificación
bind:checked para casillas de verificación individuales
Límites de caracteres y contadores

Resumen

Los textareas se enlazan con bind:value igual que otros inputs. Agrega límites de caracteres para una mejor experiencia de usuario, y considera el redimensionamiento automático para contenido más extenso. El formulario de reserva ahora está completo en el lado del cliente.

Puntos clave:

bind:value funciona con textarea
Usa maxlength y contadores de caracteres
Establece font-family: inherit para un estilo consistente
El redimensionamiento automático mejora la UX para contenido más extenso

Próximos Pasos

El formulario funciona, pero todo está en un solo archivo. Continúa con el Módulo 7: Comunicación entre Componentes para dividirlo en componentes reutilizables.