Escolha Seu Serviço

O formulário de agendamento precisa de seleção de serviço. Quando os clientes só podem escolher um serviço por agendamento, os botões de rádio funcionam perfeitamente. O bind:group do Svelte conecta múltiplos inputs a um único valor.

O Que Você Vai Aprender

Usar bind:group para botões de rádio
Criar UI de seleção de serviço
Lidar com grupos de checkbox para múltiplas seleções
Exibir detalhes do serviço selecionado

Conceitos Básicos de Botão de Rádio

Botões de rádio permitem que os usuários selecionem uma opção de um grupo. Todos os rádios em um grupo compartilham o mesmo name:

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

<fieldset>
  <legend>Select a Service</legend>
  
  <label>
    <input type="radio" name="service" value="lawn-mowing" bind:group={selectedService} />
    Lawn Mowing
  </label>
  
  <label>
    <input type="radio" name="service" value="hedge-trimming" bind:group={selectedService} />
    Hedge Trimming
  </label>
  
  <label>
    <input type="radio" name="service" value="consultation" bind:group={selectedService} />
    Garden Consultation
  </label>
</fieldset>

<p>Selected: {selectedService || 'None'}</p>

bind:group conecta todos os três inputs a selectedService. Clicar em qualquer rádio atualiza o valor vinculado para o value daquele input.

Gerar a Partir de Dados

Com serviços reais, gere as opções:

<script>
  let selectedService = $state('');
  
  const services = [
    { id: '1', slug: 'lawn-mowing', name: 'Lawn Mowing', price: 50 },
    { id: '2', slug: 'hedge-trimming', name: 'Hedge Trimming', price: 75 },
    { id: '3', slug: 'garden-consultation', name: 'Garden Consultation', price: 100 },
    { id: '4', slug: 'tree-pruning', name: 'Tree Pruning', price: 150 }
  ];
</script>

<fieldset>
  <legend>Select a Service</legend>
  
  {#each services as service}
    <label class="service-option">
      <input 
        type="radio" 
        name="service" 
        value={service.slug}
        bind:group={selectedService}
      />
      <span class="service-name">{service.name}</span>
      <span class="service-price">${service.price}</span>
    </label>
  {/each}
</fieldset>

Cards de Serviço Visuais

Torne a seleção mais visual:

<script>
  let selectedService = $state('');
  
  const services = [
    { 
      id: '1', 
      slug: 'lawn-mowing', 
      name: 'Lawn Mowing', 
      description: 'Professional lawn mowing service.',
      price: 50,
      duration: 60
    },
    { 
      id: '2', 
      slug: 'hedge-trimming', 
      name: 'Hedge Trimming', 
      description: 'Expert hedge and shrub trimming.',
      price: 75,
      duration: 90
    },
    { 
      id: '3', 
      slug: 'garden-consultation', 
      name: 'Garden Consultation', 
      description: 'One-on-one garden planning advice.',
      price: 100,
      duration: 60
    }
  ];
  
  let selectedDetails = $derived(
    services.find(s => s.slug === selectedService)
  );
</script>

<fieldset class="service-selection">
  <legend>Select a Service</legend>
  
  <div class="service-grid">
    {#each services as service}
      <label class="service-card" class:selected={selectedService === service.slug}>
        <input 
          type="radio" 
          name="service" 
          value={service.slug}
          bind:group={selectedService}
        />
        <div class="card-content">
          <h3>{service.name}</h3>
          <p>{service.description}</p>
          <div class="card-footer">
            <span class="price">${service.price}</span>
            <span class="duration">{service.duration} min</span>
          </div>
        </div>
      </label>
    {/each}
  </div>
</fieldset>

{#if selectedDetails}
  <div class="selection-summary">
    <h3>You selected: {selectedDetails.name}</h3>
    <p>Price: ${selectedDetails.price} · Duration: {selectedDetails.duration} minutes</p>
  </div>
{/if}

<style>
  .service-grid {
    display: grid;
    gap: 1rem;
  }
  
  .service-card {
    display: block;
    padding: 1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
  }
  
  .service-card:hover {
    border-color: #007bff;
  }
  
  .service-card.selected {
    border-color: #007bff;
    background: #f0f7ff;
  }
  
  .service-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  .card-content h3 {
    margin: 0 0 0.5rem 0;
  }
  
  .card-content p {
    margin: 0 0 1rem 0;
    color: #666;
  }
  
  .card-footer {
    display: flex;
    justify-content: space-between;
  }
  
  .price {
    font-weight: bold;
    color: #007bff;
  }
  
  .duration {
    color: #666;
  }
</style>

O input de rádio fica visualmente oculto — o card inteiro se torna clicável.

Grupos de Checkbox

E se os clientes puderem selecionar múltiplos complementos? Use checkboxes com bind:group:

<script>
  let selectedAddOns = $state([]);
  
  const addOns = [
    { id: 'cleanup', name: 'Garden Cleanup', price: 25 },
    { id: 'fertilizer', name: 'Lawn Fertilizer', price: 15 },
    { id: 'weed-control', name: 'Weed Control', price: 20 }
  ];
  
  let addOnTotal = $derived(
    addOns
      .filter(addon => selectedAddOns.includes(addon.id))
      .reduce((sum, addon) => sum + addon.price, 0)
  );
</script>

<fieldset>
  <legend>Add-Ons (Optional)</legend>
  
  {#each addOns as addon}
    <label class="addon-option">
      <input 
        type="checkbox" 
        value={addon.id}
        bind:group={selectedAddOns}
      />
      <span>{addon.name}</span>
      <span class="addon-price">+${addon.price}</span>
    </label>
  {/each}
</fieldset>

{#if selectedAddOns.length > 0}
  <p>Add-ons total: ${addOnTotal}</p>
{/if}

Com checkboxes, bind:group usa um array. Valores selecionados são adicionados; valores desmarcados são removidos.

bind:checked para Checkboxes Individuais

Para um checkbox avulso (não um grupo), use bind:checked:

<script>
  let agreeToTerms = $state(false);
  let wantsNewsletter = $state(false);
</script>

<label>
  <input type="checkbox" bind:checked={agreeToTerms} required />
  I agree to the terms and conditions
</label>

<label>
  <input type="checkbox" bind:checked={wantsNewsletter} />
  Send me promotional emails
</label>

<button disabled={!agreeToTerms}>Book Now</button>

bind:checked vincula a um booleano — true quando marcado, false quando não.

Seleção de Serviço Completa

Integre ao formulário de agendamento:

<!-- filename: src/lib/components/BookingForm.svelte (partial) -->
<script>
  // Previous state...
  let customerName = $state('');
  let customerEmail = $state('');
  let bookingDate = $state('');
  let selectedTime = $state('');
  
  // Service selection
  let selectedService = $state('');
  let selectedAddOns = $state([]);
  let agreeToTerms = $state(false);
  
  const services = [
    { slug: 'lawn-mowing', name: 'Lawn Mowing', price: 50, duration: 60 },
    { slug: 'hedge-trimming', name: 'Hedge Trimming', price: 75, duration: 90 },
    { slug: 'garden-consultation', name: 'Garden Consultation', price: 100, duration: 60 }
  ];
  
  const addOns = [
    { id: 'cleanup', name: 'Garden Cleanup', price: 25 },
    { id: 'fertilizer', name: 'Lawn Fertilizer', price: 15 }
  ];
  
  let selectedServiceDetails = $derived(
    services.find(s => s.slug === selectedService)
  );
  
  let totalPrice = $derived(() => {
    if (!selectedServiceDetails) return 0;
    const addOnTotal = addOns
      .filter(a => selectedAddOns.includes(a.id))
      .reduce((sum, a) => sum + a.price, 0);
    return selectedServiceDetails.price + addOnTotal;
  });
</script>

<form>
  <!-- Contact and date fields... -->
  
  <fieldset>
    <legend>Select a Service</legend>
    
    {#each services as service}
      <label class="service-option" class:selected={selectedService === service.slug}>
        <input 
          type="radio" 
          name="service" 
          value={service.slug}
          bind:group={selectedService}
          required
        />
        <span class="name">{service.name}</span>
        <span class="details">${service.price} · {service.duration} min</span>
      </label>
    {/each}
  </fieldset>
  
  <fieldset>
    <legend>Add-Ons (Optional)</legend>
    
    {#each addOns as addon}
      <label class="addon-option">
        <input 
          type="checkbox" 
          value={addon.id}
          bind:group={selectedAddOns}
        />
        {addon.name} (+${addon.price})
      </label>
    {/each}
  </fieldset>
  
  <div class="total">
    <strong>Total: ${totalPrice()}</strong>
  </div>
  
  <label class="terms">
    <input type="checkbox" bind:checked={agreeToTerms} required />
    I agree to the terms and conditions
  </label>
  
  <button type="submit" disabled={!agreeToTerms}>
    Book Now
  </button>
</form>

Erros Comuns

Esquecer o Atributo name

<!-- ❌ Without name, radios don't form a group natively -->
<input type="radio" value="a" bind:group={selected} />
<input type="radio" value="b" bind:group={selected} />

<!-- ✅ Include name for proper form behavior -->
<input type="radio" name="choice" value="a" bind:group={selected} />
<input type="radio" name="choice" value="b" bind:group={selected} />

Usar o Binding Errado

<!-- ❌ bind:value doesn't work for radio groups -->
<input type="radio" bind:value={selected} />

<!-- ✅ Use bind:group for radios -->
<input type="radio" bind:group={selected} />

<!-- ❌ bind:group for single checkbox -->
<input type="checkbox" bind:group={agree} />

<!-- ✅ Use bind:checked for single checkbox -->
<input type="checkbox" bind:checked={agree} />

Resumo

bind:group conecta botões de rádio e checkboxes a um estado compartilhado. Rádios vinculam a um único valor; checkboxes vinculam a um array. Use bind:checked para checkboxes avulsos.

Principais conclusões:

bind:group para botões de rádio → valor único
bind:group para checkboxes → array de valores
bind:checked para checkbox individual → booleano
Inclua o atributo name para compatibilidade com formulários

Próximos Passos

O formulário captura a seleção de serviço. Continue com Adicionar Textarea de Notas Opcionais para permitir que os clientes forneçam instruções adicionais.