Elige Tu Servicio

El formulario de reserva necesita selección de servicio. Cuando los clientes solo pueden elegir un servicio por reserva, los botones de radio funcionan perfectamente. El bind:group de Svelte conecta múltiples inputs a un único valor.

Lo Que Aprenderás

Usar bind:group para botones de radio
Crear una UI de selección de servicio
Manejar grupos de checkboxes para múltiples selecciones
Mostrar los detalles del servicio seleccionado

Conceptos Básicos de Botones de Radio

Los botones de radio permiten a los usuarios seleccionar una opción de un grupo. Todos los radios de un grupo comparten el mismo 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 los tres inputs a selectedService. Al hacer clic en cualquier radio, el valor vinculado se actualiza al value de ese input.

Generar a partir de Datos

Con servicios reales, genera las opciones:

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

Tarjetas de Servicio Enriquecidas

Haz la selección más 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>

El input de radio está visualmente oculto — toda la tarjeta se vuelve clicable.

Grupos de Checkboxes

¿Qué pasa si los clientes pueden seleccionar múltiples complementos? Usa checkboxes con 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}

Con checkboxes, bind:group utiliza un array. Los valores seleccionados se agregan; los valores deseleccionados se eliminan.

Bind:checked para Checkboxes Individuales

Para un checkbox independiente (no un grupo), usa 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 se vincula a un booleano — true cuando está marcado, false cuando no lo está.

Selección de Servicio Completa

Integra en el formulario de reserva:

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

Errores Comunes

Olvidar el 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 el Binding Incorrecto

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

Resumen

bind:group conecta botones de radio y checkboxes a un estado compartido. Los radios se vinculan a un único valor; los checkboxes se vinculan a un array. Usa bind:checked para checkboxes independientes.

Puntos clave:

bind:group para botones de radio → valor único
bind:group para checkboxes → array de valores
bind:checked para checkbox individual → booleano
Incluye el atributo name para compatibilidad con formularios

Próximos Pasos

El formulario captura la selección de servicio. Continúa con Agregar Textarea de Notas Opcionales para permitir que los clientes proporcionen instrucciones adicionales.