Deixe os Clientes Contarem Mais

Às vezes um dropdown não é suficiente. Os clientes podem ter instruções específicas: "Entre pelo portão lateral," "Alérgico a certos fertilizantes," ou "Por favor, ligue antes de chegar." Uma textarea para notas dá a eles espaço para compartilhar detalhes.

O Que Você Vai Aprender

Vincular valores de textarea
Adicionar limites de caracteres
Exibir caracteres restantes
Fazer textareas redimensionarem automaticamente

Vinculação Básica de Textarea

Textareas se vinculam assim como 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>

O bind:value mantém o conteúdo da textarea sincronizado com o estado.

Adicionar um Limite de Caracteres

Evite notas excessivamente longas:

<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>

O atributo maxlength impede a digitação além do limite. O contador de caracteres fornece feedback.

Aplicar Limite Sem Atributo

Se você quiser um tratamento personalizado em vez do 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>

Essa abordagem permite adicionar comportamento personalizado quando o limite é atingido.

Textarea com Redimensionamento Automático

Faça a textarea crescer conforme o usuário digita:

<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 dá uma referência ao elemento DOM, permitindo manipular sua altura.

Adicionar ao Formulário de Reserva

Aqui está a seção 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>

O Formulário de Reserva Completo

Com todos os campos no lugar, aqui está a estrutura completa do formulário:

<!-- 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}

Erros Comuns

Usar o Atributo value em Vez de Vinculação

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

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

Esquecer font-family

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

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

Não Definir min-height

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

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

Módulo Concluído! 🎉

Você terminou o Módulo 6: Vinculação de Dados. O formulário de reserva agora tem:

Inputs de texto para nome e e-mail
Seletor de data para a data do agendamento
Dropdown para horário
Seleção de serviço com botões de rádio
Checkboxes de complementos
Textarea de notas
Checkbox de termos

O que você aprendeu:

bind:value para inputs de texto, e-mail e data
bind:value para dropdowns select
bind:group para botões de rádio e grupos de checkboxes
bind:checked para checkboxes individuais
Limites de caracteres e contadores

Resumo

Textareas se vinculam com bind:value assim como outros inputs. Adicione limites de caracteres para melhor UX e considere o redimensionamento automático para conteúdos mais longos. O formulário de reserva agora está completo no lado do cliente.

Principais aprendizados:

bind:value funciona com textarea
Use maxlength e contadores de caracteres
Defina font-family: inherit para estilização consistente
O redimensionamento automático melhora a UX para conteúdos mais longos

Próximos Passos

O formulário funciona, mas está todo em um único arquivo. Continue com o Módulo 7: Comunicação entre Componentes para dividi-lo em componentes reutilizáveis.