Flujo de Datos Bidireccional Simplificado

En la mayoría de los frameworks, los datos fluyen en una sola dirección: del estado del componente al DOM. Cuando un usuario escribe en un campo de texto, hay que escuchar eventos manualmente y actualizar el estado. Este patrón —aunque explícito— genera código repetitivo que oscurece la intención y hace que las interacciones simples se sientan tediosas.

Considera este escenario común: tienes un campo de búsqueda y quieres filtrar una lista mientras el usuario escribe. Sin binding, necesitas manejadores de eventos, actualizaciones de estado y una coordinación cuidadosa:

<script>
	let searchTerm = $state('')

	function handleInput(event) {
		searchTerm = event.target.value
	}
</script>

<input value={searchTerm} oninput={handleInput} />

La directiva bind: de Svelte elimina esta fricción al establecer un enlace de datos bidireccional: cuando el estado cambia, la interfaz se actualiza automáticamente, y cuando el usuario interactúa con elementos enlazados, el estado se actualiza automáticamente. Esta sincronización bidireccional transforma patrones comunes como el manejo de formularios, de una coreografía de múltiples pasos a una simplicidad declarativa:

<script>
	let searchTerm = $state('')
</script>

<input bind:value={searchTerm} />

Una línea. Sin manejadores de eventos. Sin ceremonias. El estado y el input permanecen perfectamente sincronizados.

Por qué esto importa: El enlace bidireccional no se trata de escribir menos código, sino de expresar la intención con claridad. Cuando escribes bind:value={searchTerm}, estás declarando una relación: "este input y esta variable son dos vistas del mismo dato." Svelte maneja toda la mecánica de sincronización por ti.

Este tutorial explora la directiva bind: de forma exhaustiva: desde los bindings básicos de inputs hasta los bindings avanzados de props de componentes, desde las propiedades de solo lectura de medios hasta las mediciones de dimensiones, desde los comportamientos de reset de formularios hasta la optimización del rendimiento. Comprenderás no solo la sintaxis, sino el modelo mental que hace que los bindings sean poderosos y los patrones que los mantienen manejables.

Comprendiendo el Flujo de Datos

El Flujo de Datos Unidireccional por Defecto

Por defecto, los datos en Svelte (y en la mayoría de los frameworks reactivos) fluyen hacia abajo:

<script>
	let name = $state('Alice')
</script>

<p>Hello, {name}!</p>

Cuando name cambia, el párrafo se actualiza. Simple, predecible y unidireccional. Esto funciona perfectamente para mostrar datos, pero ¿qué pasa con la entrada del usuario?

Sin binding, capturar la entrada del usuario requiere un manejo explícito de eventos:

<script>
	let name = $state('Alice')

	function handleInput(event) {
		name = event.target.value
	}
</script>

<input value={name} oninput={handleInput} /><p>Hello, {name}!</p>

Estás cerrando el ciclo manualmente: estado → DOM (mediante value), y DOM → estado (mediante oninput). Este patrón es verboso pero transparente: puedes ver exactamente lo que está ocurriendo.

El Atajo del Enlace Bidireccional

La directiva bind: automatiza este ciclo:

<script>
	let name = $state('Alice')
</script>

<input bind:value={name} /><p>Hello, {name}!</p>

Detrás de escena, Svelte crea el listener de eventos por ti. Cuando el input dispara un evento input, Svelte actualiza name. Cuando tu código actualiza name, Svelte actualiza la propiedad value del input. Los dos permanecen sincronizados automáticamente.

Modelo mental: Piensa en bind: como la creación de una "conexión en vivo" entre una variable y una propiedad del DOM. Cualquier cambio en cualquiera de los dos extremos se propaga al otro de forma instantánea.

Cuándo Usar Cada Enfoque

Usa bind: cuando:

La relación es directa: "este input controla esta variable"
No necesitas transformar, validar o interceptar el valor durante las actualizaciones
Estás construyendo formularios, paneles de configuración o controles interactivos

Usa manejadores de eventos explícitos cuando:

Necesitas transformar la entrada (p. ej., recortar espacios, convertir a minúsculas, sanear)
Necesitas validar antes de aceptar cambios
Necesitas disparar efectos secundarios (llamadas a API, analítica)
La lógica es suficientemente compleja como para que la explicitud facilite la comprensión

Ambos enfoques son válidos. Usa bind: para la simplicidad, y manejadores de eventos para el control.

Bindings Básicos de Inputs

Inputs de Texto: `bind:value`

El binding más común sincroniza el valor de un elemento <input> con una variable:

<script>
	let username = $state('')
	let email = $state('')
	let bio = $state('')
</script>

<form>
	<label>
		Username:
		<input type="text" bind:value={username} />
	</label>

	<label>
		Email:
		<input type="email" bind:value={email} />
	</label>

	<label>
		Bio:
		<textarea bind:value={bio}></textarea>
	</label>
</form>

<div class="preview">
	<p><strong>Username:</strong> {username || '(empty)'}</p>
	<p><strong>Email:</strong> {email || '(empty)'}</p>
	<p><strong>Bio:</strong> {bio || '(empty)'}</p>
</div>

Cómo funciona: Svelte escucha el evento input en el elemento. Cada vez que el usuario escribe, el evento se dispara y Svelte lee event.target.value y lo asigna a tu variable. Si cambias la variable de forma programática (p. ej., username = 'Bob'), Svelte actualiza la propiedad value del input y el DOM refleja el cambio.

Sintaxis abreviada: Cuando el nombre de la variable coincide con el nombre de la propiedad, puedes omitir el valor:

<input bind:value />
<!-- Same as: -->
<input bind:value />

Esto solo funciona cuando la variable se llama literalmente value. Es una pequeña conveniencia para casos comunes.

Inputs Numéricos: Coerción de Tipo Automática

Para <input type="number"> e <input type="range">, Svelte convierte automáticamente el valor de cadena a número:

<script>
	let quantity = $state(1)
	let price = $state(9.99)
	let discount = $state(0)

	let total = $derived((quantity * price * (1 - discount / 100)).toFixed(2))
</script>

<div class="calculator">
	<label>
		Quantity:
		<input type="number" bind:value={quantity} min="1" />
	</label>

	<label>
		Price per item: $
		<input type="number" bind:value={price} min="0" step="0.01" />
	</label>

	<label>
		Discount: {discount}%
		<input type="range" bind:value={discount} min="0" max="50" />
	</label>

	<p class="total">Total: ${total}</p>
</div>

Por qué importa la coerción automática: En HTML, todos los valores de formulario son cadenas. Sin coerción, tendrías que llamar manualmente a parseFloat() o parseInt() en cada valor. Svelte maneja esto por ti, por lo que quantity y price son números reales, no cadenas.

Caso límite - inputs vacíos o inválidos: Si un input numérico está vacío o contiene caracteres inválidos, el valor enlazado se convierte en undefined (no NaN ni "" como en algunos frameworks). Ten esto en cuenta:

<script>
	let age = $state(undefined)

	let isValid = $derived(age !== undefined && age > 0 && age < 150)
</script>

<input type="number" bind:value={age} placeholder="Your age" />

{#if age === undefined}
	<p class="hint">Please enter your age</p>
{:else if !isValid}
	<p class="error">Please enter a valid age (1-150)</p>
{:else}
	<p class="success">Age: {age}</p>
{/if}

¿Por qué undefined y no NaN? Svelte trata los inputs numéricos vacíos o inválidos como "ningún valor proporcionado" en lugar de "un error de análisis numérico." Esto facilita distinguir entre "el usuario todavía no ha ingresado nada" y "el usuario ingresó algo, y es cero."

Valores por Defecto y Reset de Formularios

Desde Svelte 5.6, los inputs pueden tener un atributo defaultValue. Cuando el input forma parte de un formulario y el formulario se resetea, el input vuelve a este valor por defecto en lugar de quedar vacío:

<script>
	let name = $state('') // Starts empty
	let email = $state('user@example.com') // Starts with value
</script>

<form>
	<label>
		Name:
		<input bind:value={name} defaultValue="Guest" />
	</label>

	<label>
		Email:
		<input bind:value={email} defaultValue="user@example.com" />
	</label>

	<button type="reset">Reset Form</button>
</form>

<p>Name: {name || '(empty)'}</p>
<p>Email: {email}</p>

Cómo funciona: Cuando haces clic en "Reset", se dispara el mecanismo de reset nativo del navegador. Svelte intercepta esto y establece los valores enlazados en su defaultValue en lugar de borrarlos. Esto es especialmente útil para formularios que deben volver a un "estado válido conocido" en lugar de vaciarse por completo.

Prioridad en el renderizado inicial: En el primer renderizado, el valor del binding tiene precedencia sobre defaultValue a menos que el binding sea null o undefined. Esto significa:

<script>
	let value1 = $state('initial') // Shows "initial"
	let value2 = $state(null) // Shows "default"
</script>

<input bind:value={value1} defaultValue="default" />
<input bind:value={value2} defaultValue="default" />

Bindings de Casillas de Verificación

Casilla de Verificación Individual: `bind:checked`

Para una casilla de verificación individual, enlaza a un booleano:

<script>
	let accepted = $state(false)
	let newsletter = $state(false)
	let notifications = $state(true)

	let canSubmit = $derived(accepted) // Terms must be accepted
</script>

<form>
	<label>
		<input type="checkbox" bind:checked={accepted} />
		I accept the terms and conditions (required)
	</label>

	<label>
		<input type="checkbox" bind:checked={newsletter} />
		Subscribe to newsletter (optional)
	</label>

	<label>
		<input type="checkbox" bind:checked={notifications} />
		Enable push notifications (optional)
	</label>

	<button type="submit" disabled={!canSubmit}>Submit</button>
</form>

<div class="status">
	<p>Terms accepted: {accepted ? '✓' : '✗'}</p>
	<p>Newsletter: {newsletter ? '✓' : '✗'}</p>
	<p>Notifications: {notifications ? '✓' : '✗'}</p>
</div>

¿Por qué bind:checked y no bind:value? Para las casillas de verificación, la propiedad relevante es checked (un booleano), no value (que suele ser una cadena estática como "on"). Svelte enlaza lo que importa.

Reset de formulario con defaultChecked: De manera similar a defaultValue, las casillas de verificación pueden tener un atributo defaultChecked:

<script>
	let enabled = $state(true)
</script>

<form>
	<label>
		<input type="checkbox" bind:checked={enabled} defaultChecked={true} />
		Feature enabled
	</label>

	<button type="reset">Reset to default (checked)</button>
</form>

Cuando el formulario se resetea, enabled pasa a ser true (el valor por defecto), no false.

Estado Indeterminado: `bind:indeterminate`

Las casillas de verificación pueden estar en un estado indeterminado —visualmente distinto de marcado o desmarcado. Esto es útil para casillas de verificación de "seleccionar todo" que controlan un grupo:

<script>
	let items = $state([
		{ id: 1, name: 'Item 1', selected: true },
		{ id: 2, name: 'Item 2', selected: false },
		{ id: 3, name: 'Item 3', selected: true }
	])

	let allSelected = $derived(items.every((item) => item.selected))
	let noneSelected = $derived(items.every((item) => !item.selected))
	let someSelected = $derived(!allSelected && !noneSelected)

	function toggleAll() {
		const newState = !allSelected
		items = items.map((item) => ({ ...item, selected: newState }))
	}
</script>

<label>
	<input type="checkbox" checked={allSelected} indeterminate={someSelected} onclick={toggleAll} />
	Select All
</label>

<hr />

{#each items as item}
	<label>
		<input
			type="checkbox"
			checked={item.selected}
			onchange={(e) => {
				items = items.map((i) => (i.id === item.id ? { ...i, selected: e.target.checked } : i))
			}}
		/>
		{item.name}
	</label>
{/each}

<p>Selected: {items.filter((i) => i.selected).length} of {items.length}</p>

Por qué importa el estado indeterminado: Cuando tienes un checkbox padre que controla checkboxes hijos, el padre debería mostrar tres estados:

Marcado: Todos los hijos están seleccionados
Desmarcado: Ningún hijo está seleccionado
Indeterminado: Algunos pero no todos los hijos están seleccionados

Esto le brinda a los usuarios una retroalimentación visual clara sobre el estado de selección sin ambigüedad.

Nota técnica: El estado indeterminado es puramente visual—no afecta la propiedad checked. Un checkbox puede ser checked={true} e indeterminate={true} simultáneamente. El estilo indeterminado (generalmente un guión) anula visualmente la marca de verificación.

Grupos de Checkboxes: `bind:group`

Cuando múltiples checkboxes deben poblar el mismo arreglo, usa bind:group:

<script>
	let selectedFeatures = $state([])

	let features = [
		{ id: 'wifi', label: 'WiFi', price: 0 },
		{ id: 'bluetooth', label: 'Bluetooth', price: 5 },
		{ id: 'gps', label: 'GPS', price: 10 },
		{ id: '4g', label: '4G LTE', price: 15 }
	]

	let totalPrice = $derived(
		selectedFeatures.reduce((sum, id) => {
			const feature = features.find((f) => f.id === id)
			return sum + (feature?.price || 0)
		}, 0)
	)
</script>

<fieldset>
	<legend>Select Features</legend>

	{#each features as feature}
		<label>
			<input type="checkbox" bind:group={selectedFeatures} value={feature.id} />
			{feature.label}
			{#if feature.price > 0}
				(+${feature.price})
			{/if}
		</label>
	{/each}
</fieldset>

<p>Selected: {selectedFeatures.join(', ') || 'None'}</p>
<p>Additional cost: ${totalPrice}</p>

Cómo funciona bind:group: Todos los checkboxes con bind:group={array} comparten el mismo arreglo. Cuando se marca un checkbox, su atributo value se agrega al arreglo. Cuando se desmarca, se elimina. Svelte maneja la manipulación del arreglo por ti.

¿Por qué no usar booleanos individuales? Podrías crear un booleano separado para cada checkbox, pero entonces tendrías que llevar el registro manualmente de cuáles están marcados y construir el arreglo tú mismo. bind:group elimina ese trabajo administrativo.

Importante: Todos los checkboxes en un grupo deben estar en el mismo componente Svelte. Los grupos no funcionan entre límites de componentes (aunque puedes pasar el arreglo como prop a componentes hijos).

Grupos de Botones de Radio

Los botones de radio son mutuamente excluyentes—solo uno puede estar seleccionado a la vez. Usa bind:group con la misma variable para todos los radios en el grupo:

<script>
	let shippingMethod = $state('standard')

	let shippingOptions = [
		{ id: 'standard', label: 'Standard (5-7 days)', price: 5.99 },
		{ id: 'express', label: 'Express (2-3 days)', price: 12.99 },
		{ id: 'overnight', label: 'Overnight', price: 24.99 }
	]

	let shippingCost = $derived.by(() => {
		const option = shippingOptions.find((o) => o.id === shippingMethod)
		return option?.price || 0
	})
</script>

<fieldset>
	<legend>Shipping Method</legend>

	{#each shippingOptions as option}
		<label>
			<input type="radio" bind:group={shippingMethod} value={option.id} />
			{option.label} - ${option.price.toFixed(2)}
		</label>
	{/each}
</fieldset>

<p>Selected: {shippingMethod}</p>
<p>Shipping cost: ${shippingCost.toFixed(2)}</p>

¿Por qué bind:group para radios? A diferencia de los checkboxes (donde bind:group puebla un arreglo), los botones de radio con bind:group establecen la variable al value del radio seleccionado. Cuando seleccionas un radio diferente, la variable se actualiza al valor de ese radio.

Modelo mental: Piensa en los botones de radio como un control de "elige uno de estas opciones". La variable del grupo contiene el valor de la opción actualmente seleccionada. Cuando el usuario hace clic en un radio diferente, Svelte actualiza la variable. Cuando cambias la variable de forma programática, Svelte marca el radio correspondiente.

Selección predeterminada: Si ningún radio está inicialmente marcado, el valor inicial de la variable determina qué radio está seleccionado:

<script>
	let method = $state('express') // 'Express' radio will be checked on load
</script>

Si el valor de la variable no coincide con el value de ningún radio, ningún radio estará marcado inicialmente (aunque los usuarios pueden seleccionar uno después).

Menús Desplegables Select

Select Simple: `bind:value`

El enlace de un elemento <select> corresponde a la propiedad value del <option> seleccionado:

<script>
	let selectedCountry = $state('us')

	let countries = [
		{ code: 'us', name: 'United States' },
		{ code: 'ca', name: 'Canada' },
		{ code: 'uk', name: 'United Kingdom' },
		{ code: 'au', name: 'Australia' },
		{ code: 'de', name: 'Germany' }
	]
</script>

<label>
	Country:
	<select bind:value={selectedCountry}>
		{#each countries as country}
			<option value={country.code}>
				{country.name}
			</option>
		{/each}
	</select>
</label>

<p>You selected: {selectedCountry}</p>

Los valores de opción pueden ser de cualquier tipo: A diferencia del HTML plano (donde los valores siempre son cadenas), Svelte te permite usar objetos o números como valores de opción:

<script>
	let selectedUser = $state(null)

	let users = [
		{ id: 1, name: 'Alice', role: 'Admin' },
		{ id: 2, name: 'Bob', role: 'Editor' },
		{ id: 3, name: 'Charlie', role: 'Viewer' }
	]
</script>

<select bind:value={selectedUser}>
	<option value={null}>-- Select a user --</option>
	{#each users as user}
		<option value={user}>
			{user.name} ({user.role})
		</option>
	{/each}
</select>

{#if selectedUser}
	<p>Selected: {selectedUser.name}, role: {selectedUser.role}</p>
{/if}

Cuando el usuario selecciona una opción, selectedUser se convierte en el objeto de usuario completo, no solo en una cadena. Esto elimina la necesidad de búsquedas.

Selección predeterminada con el atributo selected: Puedes marcar una opción como seleccionada inicialmente usando el atributo selected:

<select bind:value={color}>
	<option value="red">Red</option>
	<option value="green" selected>Green</option>
	<option value="blue">Blue</option>
</select>

Cuando se restablezca un formulario que contiene este select, volverá a "Green" (la opción marcada), no a la primera opción.

Prioridad en el renderizado inicial: Al igual que con los inputs, el valor del enlace tiene precedencia sobre el atributo selected a menos que el enlace sea undefined.

Select Múltiple: `bind:value` con Arreglo

Un elemento <select multiple> se comporta como un grupo de checkboxes—la variable enlazada es un arreglo:

<script>
	let selectedTags = $state(['javascript', 'svelte'])

	let availableTags = [
		'javascript',
		'typescript',
		'svelte',
		'react',
		'vue',
		'angular',
		'node',
		'deno'
	]
</script>

<label>
	Select tags (hold Ctrl/Cmd to select multiple):
	<select bind:value={selectedTags} multiple size="8">
		{#each availableTags as tag}
			<option value={tag}>{tag}</option>
		{/each}
	</select>
</label>

<p>Selected: {selectedTags.join(', ') || 'None'}</p>

Cómo funciona: Cuando se selecciona una opción, su valor se agrega al arreglo. Cuando se deselecciona, se elimina. Svelte mantiene el arreglo sincronizado con las selecciones del usuario.

Nota de usabilidad: Los menús desplegables de selección múltiple son notoriamente difíciles de usar. Considera usar checkboxes o componentes de selección múltiple personalizados para una mejor experiencia de usuario.

Inputs de Archivo: `bind:files`

Los inputs de archivo usan bind:files para acceder al FileList de archivos seleccionados:

<script>
	let files = $state()
	let previewUrls = $state([])

	$effect(() => {
		if (files && files.length > 0) {
			previewUrls = Array.from(files).map((file) => URL.createObjectURL(file))
		} else {
			previewUrls = []
		}

		// Cleanup URLs when files change
		return () => {
			previewUrls.forEach((url) => URL.revokeObjectURL(url))
		}
	})

	function clearFiles() {
		// To clear files, you must create a new FileList via DataTransfer
		files = new DataTransfer().files
	}
</script>

<label for="images">Upload images:</label>
<input id="images" type="file" bind:files accept="image/*" multiple />

<button onclick={clearFiles}>Clear</button>

{#if files && files.length > 0}
	<p>Selected {files.length} file(s):</p>
	<ul>
		{#each Array.from(files) as file}
			<li>{file.name} ({(file.size / 1024).toFixed(2)} KB)</li>
		{/each}
	</ul>

	<div class="previews">
		{#each previewUrls as url}
			<img src={url} alt="Preview" style="max-width: 200px; margin: 8px;" />
		{/each}
	</div>
{/if}

Por qué bind:files es especial: A diferencia de otros enlaces, los inputs de archivo requieren un objeto FileList, que no puede construirse directamente. Para establecer archivos de forma programática, debes crear un objeto DataTransfer y obtener su propiedad files.

Por qué los archivos comienzan como undefined: En entornos de renderizado del lado del servidor, DataTransfer puede no estar disponible. Dejar files sin inicializar previene errores durante el SSR.

Modificar la lista de archivos: FileList es inmutable—no puedes eliminar archivos individuales directamente. Para eliminar un archivo, crea un nuevo DataTransfer, agrega los archivos que deseas conservar y asigna el nuevo FileList:

<script>
	function removeFile(indexToRemove) {
		const dt = new DataTransfer()
		Array.from(files).forEach((file, index) => {
			if (index !== indexToRemove) {
				dt.items.add(file)
			}
		})
		files = dt.files
	}
</script>

Enlaces de Elementos Multimedia

Los elementos multimedia (<audio> y <video>) tienen varias propiedades enlazables. Entender cuáles son bidireccionales y cuáles son de solo lectura es fundamental.

Enlaces Multimedia Bidireccionales

Estas propiedades pueden tanto leerse como establecerse:

<script>
	let currentTime = $state(0)
	let playbackRate = $state(1)
	let paused = $state(true)
	let volume = $state(1)
	let muted = $state(false)
</script>

<video
	src="/sample-video.mp4"
	bind:currentTime
	bind:playbackRate
	bind:paused
	bind:volume
	bind:muted
	controls
></video>

<div class="controls">
	<button onclick={() => (paused = !paused)}>
		{paused ? '▶️ Play' : '⏸️ Pause'}
	</button>

	<button onclick={() => (currentTime = 0)}>⏮️ Restart</button>

	<label>
		Volume: {Math.round(volume * 100)}%
		<input type="range" bind:value={volume} min="0" max="1" step="0.01" />
	</label>

	<label>
		<input type="checkbox" bind:checked={muted} />
		Muted
	</label>

	<label>
		Speed:
		<select bind:value={playbackRate}>
			<option value={0.5}>0.5x</option>
			<option value={1}>1x (Normal)</option>
			<option value={1.25}>1.25x</option>
			<option value={1.5}>1.5x</option>
			<option value={2}>2x</option>
		</select>
	</label>
</div>

Por qué estos son bidireccionales:

currentTime: Puedes ir a un tiempo específico estableciendo este valor
playbackRate: Puedes acelerar o ralentizar la reproducción de forma programática
paused: Establecer paused = false reproduce el video; paused = true lo pausa
volume: Puedes ajustar el volumen de forma programática (de 0 a 1)
muted: Puedes silenciar/activar el sonido de forma programática

Estos enlaces te permiten construir controles multimedia personalizados que están completamente sincronizados con el estado del elemento multimedia.

Enlaces Multimedia de Solo Lectura

Estas propiedades reflejan el estado del multimedia pero no pueden establecerse:

<script>
	let duration = $state(0)
	let buffered = $state(null)
	let seekable = $state(null)
	let seeking = $state(false)
	let ended = $state(false)
	let readyState = $state(0)
	let played = $state(null)

	let progress = $derived(duration > 0 ? (currentTime / duration) * 100 : 0)
</script>

<audio
	src="/podcast.mp3"
	bind:duration
	bind:buffered
	bind:seekable
	bind:seeking
	bind:ended
	bind:readyState
	bind:played
	controls
></audio>

<div class="info">
	<p>Duration: {Math.floor(duration)}s</p>
	<p>Progress: {progress.toFixed(1)}%</p>
	<p>Ready state: {readyState} (0-4)</p>
	<p>Seeking: {seeking ? 'Yes' : 'No'}</p>
	<p>Ended: {ended ? 'Yes' : 'No'}</p>
</div>

Por qué estos son de solo lectura:

duration: La duración del multimedia está determinada por el archivo en sí
buffered: El almacenamiento en búfer es manejado por el navegador, no por tu código
seekable: Los rangos que son navegables dependen del formato del multimedia
seeking: Refleja si una operación de navegación está en curso
ended: Verdadero cuando la reproducción ha llegado al final
readyState: Rastrea el estado de carga (0 = nada, 4 = suficiente cargado)
played: TimeRanges que representan qué partes se han reproducido

Estos enlaces son útiles para mostrar información o reaccionar a cambios de estado (mediante $effect), pero no puedes modificar el multimedia estableciéndolos.

Enlaces Específicos de Video

Los elementos de video tienen dos enlaces adicionales de solo lectura para las dimensiones:

<script>
	let videoWidth = $state(0)
	let videoHeight = $state(0)
</script>

<video src="/movie.mp4" bind:videoWidth bind:videoHeight controls></video>

<p>Video dimensions: {videoWidth} × {videoHeight}</p>

¿Por qué de solo lectura? Las dimensiones intrínsecas del video provienen del archivo de video en sí. Puedes estilizar el elemento <video> con CSS para mostrarlo en cualquier tamaño, pero la resolución real del video es fija.

Enlaces de Elementos de Imagen

Las imágenes tienen enlaces de solo lectura similares para sus dimensiones naturales (intrínsecas):

<script>
	let naturalWidth = $state(0)
	let naturalHeight = $state(0)
</script>

<img src="/photo.jpg" bind:naturalWidth bind:naturalHeight alt="Sample" style="max-width: 400px;" />

<p>Original image size: {naturalWidth} × {naturalHeight}</p>
<p>Display size: {naturalWidth > 400 ? '400px (scaled)' : naturalWidth + 'px'}</p>

Caso de uso: Estos enlaces son útiles para el manejo de imágenes responsivas, el cálculo de proporciones de aspecto o la validación de dimensiones de imagen antes de la carga.

Elemento Details: `bind:open`

El elemento <details> tiene un enlace bidireccional open:

<script>
	let detailsOpen = $state(false)
	let faqOpen = $state(false)
</script>

<details bind:open={detailsOpen}>
	<summary>What is Svelte?</summary>
	<p>Svelte is a radical new approach to building user interfaces...</p>
</details>

<details bind:open={faqOpen}>
	<summary>How does binding work?</summary>
	<p>Bindings create a two-way connection between state and DOM properties...</p>
</details>

<button onclick={() => (detailsOpen = !detailsOpen)}>
	{detailsOpen ? 'Collapse' : 'Expand'} first section
</button>

<button
	onclick={() => {
		detailsOpen = true
		faqOpen = true
	}}
>
	Expand all
</button>

<button
	onclick={() => {
		detailsOpen = false
		faqOpen = false
	}}
>
	Collapse all
</button>

Por qué es útil: Puedes controlar widgets de divulgación de forma programática, crear funcionalidad de "expandir todo", o persistir el estado abierto/cerrado en localStorage.

Enlaces de Contenteditable

Los elementos con contenteditable="true" pueden enlazarse a tres propiedades de texto diferentes:

<script>
	let htmlContent = $state('<p><strong>Bold</strong> and <em>italic</em> text</p>')
	let innerTextContent = $state('Plain text only')
	let textContentValue = $state('Raw text content')
</script>

<div class="editor-section">
	<h3>innerHTML (preserves HTML tags)</h3>
	<div contenteditable="true" bind:innerHTML={htmlContent} class="editor"></div>
	<pre>{htmlContent}</pre>
</div>

<div class="editor-section">
	<h3>innerText (respects text rendering)</h3>
	<div contenteditable="true" bind:innerText={innerTextContent} class="editor"></div>
	<pre>{innerTextContent}</pre>
</div>

<div class="editor-section">
	<h3>textContent (raw text nodes)</h3>
	<div contenteditable="true" bind:textContent={textContentValue} class="editor"></div>
	<pre>{textContentValue}</pre>
</div>

<style>
	.editor {
		border: 1px solid #ccc;
		padding: 12px;
		min-height: 100px;
		border-radius: 4px;
		margin-bottom: 8px;
	}

	.editor:focus {
		outline: 2px solid #0066cc;
	}
</style>

Diferencias explicadas:

innerHTML: Incluye todas las etiquetas HTML. Útil para editores de texto enriquecido, pero peligroso con la entrada del usuario (riesgo de XSS)
innerText: Respeta el estilo CSS y la visibilidad. El texto oculto se excluye, <br> se convierte en salto de línea
textContent: Contenido de texto sin procesar de todos los nodos. Incluye texto oculto, ignora el estilo

Advertencia de seguridad: Usar bind:innerHTML con contenido generado por el usuario te expone a ataques XSS. Siempre sanitiza el HTML antes de renderizarlo:

<script>
	import DOMPurify from 'dompurify'

	let userHtml = $state('')
	let sanitizedHtml = $derived(DOMPurify.sanitize(userHtml))
</script>

<div contenteditable bind:innerHTML={userHtml}></div><div>{@html sanitizedHtml}</div>

Enlaces de Dimensiones (Solo lectura)

Todos los elementos visibles pueden enlazarse a sus dimensiones usando un ResizeObserver. Estos enlaces son solo lectura—no puedes redimensionar un elemento estableciendo estos valores:

<script>
	let clientWidth = $state(0)
	let clientHeight = $state(0)
	let offsetWidth = $state(0)
	let offsetHeight = $state(0)
	let contentRect = $state(null)

	let area = $derived(clientWidth * clientHeight)
</script>

<div
	class="measured-box"
	bind:clientWidth
	bind:clientHeight
	bind:offsetWidth
	bind:offsetHeight
	bind:contentRect
>
	<p>Resize your browser window to see measurements update</p>
	<p>clientWidth: {clientWidth}px (content + padding)</p>
	<p>clientHeight: {clientHeight}px</p>
	<p>offsetWidth: {offsetWidth}px (content + padding + border + scrollbar)</p>
	<p>offsetHeight: {offsetHeight}px</p>
	<p>Area: {area.toLocaleString()}px²</p>
</div>

<style>
	.measured-box {
		border: 5px solid #333;
		padding: 20px;
		margin: 20px;
		background: #f0f0f0;
		resize: both;
		overflow: auto;
		min-width: 200px;
		min-height: 150px;
	}
</style>

Entendiendo las dimensiones:

clientWidth/Height: Área de contenido + relleno (excluye borde y barra de desplazamiento)
offsetWidth/Height: Área de contenido + relleno + borde + barra de desplazamiento
contentRect: Un DOMRectReadOnly con mediciones más detalladas
contentBoxSize: Arreglo de objetos ResizeObserverSize
borderBoxSize: Similar, pero incluye el borde
devicePixelContentBoxSize: Dimensiones en píxeles físicos (útil para pantallas de alta densidad)

¿Por qué solo lectura? Estos enlaces observan el tamaño del elemento según lo determina el diseño, el CSS y el contenido. No puedes forzar a un elemento a tener un tamaño específico estableciendo estos valores—debes usar CSS o el atributo style.

Casos de uso:

Dimensionamiento responsivo de canvas
Dimensiones dinámicas de gráficos
Renderizado condicional basado en el tamaño del contenedor
Medir texto o contenido antes de tomar decisiones de diseño

Nota de rendimiento: Los enlaces de dimensiones usan ResizeObserver, que es muy eficiente. Sin embargo, evita enlazar dimensiones en cientos de elementos simultáneamente—considera usar una lista virtualizada o medir un contenedor en su lugar.

Advertencia importante: Los elementos display: inline no tienen ancho/alto (excepto los elementos de tamaño intrínseco como <img> y <canvas>). Cambia el display del elemento a inline-block o block para medirlo.

Referencias a Elementos: bind:this

La directiva bind:this captura una referencia a un elemento DOM o instancia de componente:

<script>
	let inputRef = $state(null)
	let canvasRef = $state(null)

	function focusInput() {
		inputRef?.focus()
	}

	$effect(() => {
		if (canvasRef) {
			const ctx = canvasRef.getContext('2d')
			ctx.fillStyle = '#ff0000'
			ctx.fillRect(10, 10, 100, 100)
		}
	})
</script>

<input bind:this={inputRef} placeholder="Click button to focus me" />
<button onclick={focusInput}>Focus Input</button>

<canvas bind:this={canvasRef} width="200" height="200"></canvas>

Cuándo usar bind:this:

Llamar a APIs imperativas del DOM (focus, play, pause, select)
Medir elementos que no tienen dimensiones enlazables
Integrar bibliotecas de terceros que necesitan una referencia al DOM
Acceder a elementos de formulario para validación

Tiempo de ciclo de vida: La referencia es undefined hasta que el elemento está montado. Siempre usa encadenamiento opcional (?.) o verifica su existencia:

<script>
	let videoRef = $state(null)

	function playVideo() {
		if (videoRef) {
			videoRef.play()
		}
	}

	// AVOID: This runs during initialization, before mount
	// videoRef.play() // Error: videoRef is undefined

	// PREFERRED: Use $effect or event handlers
	$effect(() => {
		videoRef?.play()
	})
</script>

Referencias a Instancias de Componentes

También puedes enlazarte a instancias de componentes para llamar a sus funciones exportadas. Aunque Svelte 5 fomenta los patrones declarativos, las APIs imperativas siguen siendo útiles para ciertos escenarios como modales y animaciones.

Enfoque Imperativo (usando `bind:this`):

<!-- Modal.svelte -->
<script>
	let { children } = $props()
	let isOpen = $state(false)

	// Functions accessible via bind:this
	function open() {
		isOpen = true
	}

	function close() {
		isOpen = false
	}

	function toggle() {
		isOpen = !isOpen
	}

	// Export functions so parent can call them via bind:this
	export { open, close, toggle }
</script>

{#if isOpen}
	<div class="modal-backdrop" onclick={close}>
		<div class="modal-content" onclick={(e) => e.stopPropagation()}>
			{@render children()}
			<button onclick={close}>Close</button>
		</div>
	</div>
{/if}

<!-- Parent.svelte -->
<script>
	import Modal from './Modal.svelte'

	let modalRef = $state(null)
</script>

<button onclick={() => modalRef?.open()}>Open Modal</button>
<button onclick={() => modalRef?.toggle()}>Toggle Modal</button>

<Modal bind:this={modalRef}>
	<h2>Modal Content</h2>
	<p>This modal was opened programmatically!</p>
</Modal>

Si bien esto funciona, mezcla el control imperativo con el renderizado declarativo, lo que puede dificultar el mantenimiento del código. En Svelte 5, prefiere usar props $bindable para mayor claridad y facilidad de prueba.

Enfoque Declarativo (preferido en Svelte 5):

<!-- Modal.svelte -->
<script>
	let { open = $bindable(false), children } = $props()

	function close() {
		open = false
	}
</script>

{#if open}
	<div class="modal-backdrop" onclick={close}>
		<div class="modal-content" onclick={(e) => e.stopPropagation()}>
			{@render children()}
			<button onclick={close}>Close</button>
		</div>
	</div>
{/if}

<!-- Parent.svelte -->
<script>
	import Modal from './Modal.svelte'

	let isModalOpen = $state(false)
</script>

<button onclick={() => (isModalOpen = true)}>Open Modal</button>
<button onclick={() => (isModalOpen = !isModalOpen)}>Toggle Modal</button>

<Modal bind:open={isModalOpen}>
	<h2>Modal Content</h2>
	<p>This modal is controlled declaratively!</p>
</Modal>

Con el uso de la directiva $bindable para la prop open, el componente padre gestiona el estado abierto del modal de forma reactiva. Esto conduce a un flujo de datos más claro y facilita las pruebas.

¿Cuándo usar cada enfoque?

Cada enfoque tiene sus méritos, y entender las compensaciones te ayuda a elegir el patrón adecuado para tu caso de uso. La decisión frecuentemente se reduce al flujo de control: ¿quién debe poseer el estado y qué tan complejo es el comportamiento del componente?

Usa imperativo (bind:this):

Animaciones o transiciones complejas - Cuando necesitas un control detallado sobre el tiempo de animación, la secuenciación o la coordinación entre múltiples elementos. Por ejemplo, un carrusel que necesita pausar, reanudar o saltar a diapositivas específicas de forma programática.
Integración de bibliotecas de terceros - Cuando se envuelven componentes de bibliotecas que exponen APIs imperativas (como bibliotecas de gráficos con métodos .update() o .destroy()).
Múltiples acciones no relacionadas - Cuando un componente expone varias operaciones independientes que no se mapean a un solo valor de estado. Por ejemplo, un reproductor de video con play(), pause(), seek(), setPlaybackRate() y captureFrame().
Pruebas de componentes internos - Cuando necesitas acceder al estado interno o activar comportamientos específicos durante las pruebas unitarias, aunque esto debe usarse con moderación.
Componentes heredados o de terceros - Cuando se trabaja con componentes existentes que fueron diseñados con APIs imperativas y refactorizarlos no es práctico.

Usa declarativo (props $bindable):

Gestión de estado simple - Cuando el comportamiento del componente se mapea claramente a un booleano o valor simple (abierto/cerrado, visible/oculto, valor seleccionado).
Estado controlado por el padre - Cuando el componente padre necesita ser la fuente de verdad del estado, facilitando la coordinación con otras partes de tu aplicación.
Flujo de datos predecible - Cuando quieres cambios de estado explícitos y trazables que son más fáciles de depurar y razonar. Cada cambio de estado fluye a través del sistema reactivo del padre.
Mejor capacidad de prueba - Cuando quieres probar el componente simplemente pasando diferentes valores de props en lugar de llamar métodos y verificar efectos secundarios.
Filosofía de Svelte 5 - El enfoque declarativo se alinea con el movimiento de Svelte 5 hacia patrones más reactivos y menos imperativos. Es más fácil de entender y mantener a lo largo del tiempo.

Enfoque híbrido

Para componentes complejos, puedes combinar ambos patrones:

<!-- VideoPlayer.svelte -->
<script>
	let { playing = $bindable(false), volume = $bindable(0.8), currentTime = $bindable(0) } = $props()

	let videoElement = $state(null)

	// Imperative methods for complex operations
	function captureFrame() {
		const canvas = document.createElement('canvas')
		const ctx = canvas.getContext('2d')
		canvas.width = videoElement.videoWidth
		canvas.height = videoElement.videoHeight
		ctx.drawImage(videoElement, 0, 0)
		return canvas.toDataURL('image/png')
	}

	function skipToChapter(chapterIndex) {
		currentTime = chapters[chapterIndex].startTime
	}

	export { captureFrame, skipToChapter }
</script>

<video bind:this={videoElement} bind:paused={!playing} bind:volume bind:currentTime />

Buenas prácticas: Comienza con el enfoque declarativo usando props $bindable. Solo agrega métodos imperativos mediante bind:this cuando encuentres operaciones que genuinamente no se mapean a estado reactivo. La mayoría de los componentes de modal, desplegable y alternancia deberían ser completamente declarativos.

Enlaces de Props de Componentes con `$bindable`

Svelte 5 introduce la runa $bindable para el enlace bidireccional entre componentes padre e hijo.

Hacer Props Enlazables

En el componente hijo, marca las props como $bindable:

<!-- Counter.svelte -->
<script>
	let { count = $bindable(0), step = 1 } = $props()
</script>

<div class="counter">
	<button onclick={() => (count -= step)}>−</button>
	<span>{count}</span>
	<button onclick={() => (count += step)}>+</button>
</div>

En el padre, usa bind: para establecer el enlace bidireccional:

<!-- Parent.svelte -->
<script>
	import Counter from './Counter.svelte'

	let value = $state(10)
</script>

<Counter bind:count={value} step={5} />

<p>Value in parent: {value}</p>

<button onclick={() => (value = 0)}>Reset from parent</button>

Cómo funciona: Cuando el componente hijo actualiza count, el value del padre se actualiza automáticamente. Cuando el padre actualiza value, la visualización del hijo se actualiza. Este es un enlace verdaderamente bidireccional entre los límites del componente.

Valores de respaldo: Las props enlazables pueden tener valores predeterminados:

<script>
	let { count = $bindable(0) } = $props()
</script>

El valor de respaldo (0) se aplica cuando el padre no enlaza la prop. Si el padre enlaza la prop pero pasa undefined, obtendrás un error en tiempo de ejecución:

<!-- AVOID: This throws an error -->
<Counter bind:count={undefinedValue} />

<!-- PREFERRED: This works -->
<Counter bind:count={zeroValue} />
<Counter />
<!-- Uses fallback: 0 -->

¿Por qué el error? Svelte aplica la regla de que si optas por el enlace, debes proporcionar un valor definido. Esto evita situaciones confusas donde el valor de respaldo lucha contra un enlace indefinido.

Múltiples Props Enlazables

Los componentes pueden tener múltiples props $bindable:

<!-- RangeSlider.svelte -->
<script>
	let { min = $bindable(0), max = $bindable(100), step = 1 } = $props()

	// Ensure min < max
	$effect(() => {
		if (min > max) {
			max = min
		}
	})
</script>

<div class="range-slider">
	<label>
		Min: {min}
		<input type="range" bind:value={min} min="0" max="100" {step} />
	</label>

	<label>
		Max: {max}
		<input type="range" bind:value={max} {min} max="100" {step} />
	</label>
</div>

Uso:

<script>
	import RangeSlider from './RangeSlider.svelte'

	let minPrice = $state(20)
	let maxPrice = $state(80)
</script>

<RangeSlider bind:min={minPrice} bind:max={maxPrice} step={5} />

<p>Price range: ${minPrice} - ${maxPrice}</p>

Componentes de Input Personalizados

Construye componentes de formulario reutilizables con validación y estilos:

<!-- TextField.svelte -->
<script>
	let {
		value = $bindable(''),
		label,
		type = 'text',
		placeholder = '',
		error = '',
		required = false
	} = $props()

	let touched = $state(false)
	let showError = $derived(touched && error)
</script>

<div class="text-field">
	<label>
		{label}
		{#if required}<span class="required">*</span>{/if}
		<input
			{type}
			bind:value
			{placeholder}
			class:error={showError}
			onblur={() => (touched = true)}
		/>
	</label>
	{#if showError}
		<p class="error-message">{error}</p>
	{/if}
</div>

<style>
	.text-field {
		margin-bottom: 16px;
	}

	label {
		display: block;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.required {
		color: #dc2626;
	}

	input {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	input:focus {
		outline: none;
		border-color: #0066cc;
	}

	input.error {
		border-color: #dc2626;
	}

	.error-message {
		color: #dc2626;
		font-size: 14px;
		margin: 4px 0 0;
	}
</style>

Uso con validación:

<script>
	import TextField from './TextField.svelte'

	let formData = $state({
		email: '',
		password: '',
		confirmPassword: ''
	})

	let errors = $derived.by(() => {
		let errs = {}

		if (formData.email && !/\S+@\S+\.\S+/.test(formData.email)) {
			errs.email = 'Please enter a valid email address'
		}

		if (formData.password && formData.password.length < 8) {
			errs.password = 'Password must be at least 8 characters'
		}

		if (formData.confirmPassword && formData.password !== formData.confirmPassword) {
			errs.confirmPassword = 'Passwords do not match'
		}

		return errs
	})
</script>

<form>
	<TextField
		bind:value={formData.email}
		label="Email"
		type="email"
		placeholder="you@example.com"
		error={errors.email}
		required
	/>

	<TextField
		bind:value={formData.password}
		label="Password"
		type="password"
		error={errors.password}
		required
	/>

	<TextField
		bind:value={formData.confirmPassword}
		label="Confirm Password"
		type="password"
		error={errors.confirmPassword}
		required
	/>

	<button type="submit" disabled={Object.keys(errors).length > 0}> Create Account </button>
</form>

Bindings de Función (Avanzado)

Desde Svelte 5.9, puedes usar bindings de función con la sintaxis bind:property={get, set}. Esto te permite interceptar y transformar valores:

<script>
	let value = $state('HELLO')
</script>

<!-- Two-way binding with transformation -->
<input bind:value={() => value, (v) => (value = v.toUpperCase())} />

<p>Value (always uppercase): {value}</p>

Cómo funciona: La primera función (getter) retorna el valor actual a mostrar. La segunda función (setter) recibe el nuevo valor y puede transformarlo antes de asignarlo.

Casos de uso:

Normalización de input (recorte de espacios, mayúsculas, formateo)
Validación antes de aceptar valores
Bindings computados con efectos secundarios

Para bindings de solo lectura: Usa null como getter:

<script>
	let width = $state(0)

	function handleResize(newWidth) {
		console.log('Width changed to:', newWidth)
		width = newWidth
	}
</script>

<div bind:clientWidth={null, handleResize}>Resizable element</div>

Esto es útil cuando quieres reaccionar a cambios de dimensión pero no necesitas mostrar el valor directamente.

Problemas Comunes y Soluciones

1: Binding a Valores Derivados

Problema: No puedes hacer binding directamente a valores $derived porque son valores computados de solo lectura.

<script>
	let firstName = $state('John')
	let lastName = $state('Doe')

	let fullName = $derived(`${firstName} ${lastName}`)
</script>

<!-- AVOID: Cannot bind to derived value -->
<input bind:value={fullName} />

Solución 1: Haz binding a las variables de estado subyacentes:

<input bind:value={firstName} placeholder="First name" />
<input bind:value={lastName} placeholder="Last name" />
<p>Full name: {fullName}</p>

Solución 2: Usa la sintaxis de binding de función de Svelte 5.9 para hacer binding de una lectura derivada con un setter explícito:

<script>
	let celsius = $state(0)

	// Derived for display
	let fahrenheit = $derived((celsius * 9) / 5 + 32)
</script>

<label>
	Celsius: <input type="number" bind:value={celsius} />
</label>
<label>
	Fahrenheit:
	<!-- getter returns derived, setter writes back through celsius -->
	<input type="number" bind:value={() => fahrenheit, (f) => (celsius = ((f - 32) * 5) / 9)} />
</label>

2: Inputs Numéricos que se Vuelven `undefined`

Problema: Los inputs numéricos vacíos o inválidos se vuelven undefined, lo que puede romper los cálculos.

<script>
	let quantity = $state(0)
	let price = $state(0)

	// AVOID: If either is undefined, total is NaN
	let total = $derived(quantity * price)
</script>

Solución: Usa el operador de fusión nula o verificaciones explícitas:

<script>
	let quantity = $state(0)
	let price = $state(0)

	let total = $derived((quantity ?? 0) * (price ?? 0))
	// Or: isNaN(quantity) || isNaN(price) ? 0 : quantity * price
</script>

3: Binding a Propiedades de Array/Objeto

Problema: La mutación directa no dispara la reactividad en Svelte 5.

<script>
	let items = $state([
		{ id: 1, name: 'Item 1', checked: false },
		{ id: 2, name: 'Item 2', checked: false }
	])
</script>

<!-- AVOID: Direct mutation -->
<input
	type="checkbox"
	checked={items[0].checked}
	onchange={(e) => (items[0].checked = e.target.checked)}
/>

Solución: Crea un nuevo array para disparar la reactividad:

<input
	type="checkbox"
	checked={items[0].checked}
	onchange={(e) => {
		items = items.map((item, i) => (i === 0 ? { ...item, checked: e.target.checked } : item))
	}}
/>

Mejor enfoque: Usa bind:checked con un handler que actualice el estado correctamente:

{#each items as item, i}
	<label>
		<input
			type="checkbox"
			checked={item.checked}
			onchange={(e) => {
				// $state Proxy tracks property mutations automatically
				items[i].checked = e.target.checked
			}}
		/>
		{item.name}
	</label>
{/each}

4: Binding Sin `$bindable`

Problema: Intentar hacer binding a una prop de componente que no está marcada como $bindable.

<!-- AVOID: Child component without $bindable -->
<script>
	let { value } = $props() // Not bindable!
</script>

<!-- AVOID: Parent tries to bind - THIS FAILS -->
<Child bind:value={parentValue} />

Solución: Marca la prop como $bindable en el componente hijo:

<!-- PREFERRED: Child component with $bindable -->
<script>
	let { value = $bindable(0) } = $props()
</script>

<!-- PREFERRED: Now this works -->
<Child bind:value={parentValue} />

5: Grupo de Checkboxes vs. Booleanos Individuales

Problema: Usar el mismo booleano para múltiples checkboxes hace que se comporten de manera idéntica.

<script>
	let agreed = $state(false)
</script>

<!-- AVOID: Both checkboxes control the same boolean -->
<label><input type="checkbox" bind:checked={agreed} /> Terms</label>
<label><input type="checkbox" bind:checked={agreed} /> Privacy</label>
<!-- Checking one checks both! -->

Solución: Usa bind:group para arrays o booleanos separados:

<script>
	// Option 1: bind:group with array
	let agreements = $state([])
</script>

<label><input type="checkbox" bind:group={agreements} value="terms" /> Terms</label>
<label><input type="checkbox" bind:group={agreements} value="privacy" /> Privacy</label>

<!-- Option 2: Separate booleans -->
<script>
	let agreedTerms = $state(false)
	let agreedPrivacy = $state(false)
</script>

<label><input type="checkbox" bind:checked={agreedTerms} /> Terms</label>
<label><input type="checkbox" bind:checked={agreedPrivacy} /> Privacy</label>

6: Select que No Muestra el Valor Inicial

Problema: El dropdown de select no muestra el valor enlazado en el renderizado inicial.

<script>
	let selectedColor = $state('purple') // No matching option!
</script>

<select bind:value={selectedColor}>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>
<!-- Shows blank because "purple" doesn't exist -->

Solución: Asegúrate de que el valor inicial coincida con una opción, o provee un placeholder:

<script>
	let selectedColor = $state('red') // Matches first option
</script>

<select bind:value={selectedColor}>
	<option value="">-- Select a color --</option>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>

Patrones del Mundo Real

1. Input de Búsqueda con Debounce

El Problema: Cuando los usuarios escriben en un cuadro de búsqueda conectado a una API, hacer una petición en cada tecla presionada sobrecarga tu servidor. Un usuario que escribe "svelte" genera 6 llamadas a la API—una por cada letra. Esto causa carga innecesaria en el servidor, ancho de banda desperdiciado y posibles condiciones de carrera.

La Solución: El debouncing retrasa la llamada a la API hasta que el usuario hace una pausa al escribir, reduciendo las peticiones de 6 a 1 mientras se mantiene una UX responsiva.

<script>
	let searchQuery = $state('')
	let debouncedQuery = $state('')
	let results = $state([])
	let isSearching = $state(false)
	let debounceTimer

	// Debounce the search query
	$effect(() => {
		clearTimeout(debounceTimer)
		isSearching = true

		debounceTimer = setTimeout(() => {
			debouncedQuery = searchQuery
		}, 300)

		return () => clearTimeout(debounceTimer)
	})

	// Perform search when debounced query changes
	$effect(() => {
		if (debouncedQuery.length < 2) {
			results = []
			isSearching = false
			return
		}

		isSearching = true

		fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`)
			.then((r) => r.json())
			.then((data) => {
				results = data
				isSearching = false
			})
			.catch(() => {
				results = []
				isSearching = false
			})
	})
</script>

<div class="search-container">
	<input
		type="search"
		bind:value={searchQuery}
		placeholder="Search products..."
		class="search-input"
	/>

	{#if isSearching}
		<div class="loading">Searching...</div>
	{:else if searchQuery.length > 0}
		{#if results.length > 0}
			<ul class="results-list">
				{#each results as result}
					<li><a href="/product/{result.id}">{result.name}</a></li>
				{/each}
			</ul>
		{:else if searchQuery.length >= 2}
			<div class="no-results">No results found for "{searchQuery}"</div>
		{/if}
	{/if}
</div>

<style>
	.search-container {
		position: relative;
		max-width: 500px;
	}

	.search-input {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		border: 2px solid #ccc;
		border-radius: 8px;
	}

	.results-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 4px;
		background: white;
		border: 1px solid #ccc;
		border-radius: 8px;
		max-height: 300px;
		overflow-y: auto;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		list-style: none;
		padding: 0;
	}

	.results-list li {
		padding: 12px;
		border-bottom: 1px solid #eee;
	}

	.results-list li:hover {
		background: #f5f5f5;
	}

	.loading,
	.no-results {
		padding: 12px;
		text-align: center;
		color: #666;
	}
</style>

Cómo funciona paso a paso:

searchQuery hace binding directamente al input para retroalimentación visual instantánea
$effect observa searchQuery y establece un timeout de 300ms para actualizar debouncedQuery
Si el usuario escribe de nuevo, limpiamos el timeout anterior y comenzamos uno nuevo
La función de limpieza previene fugas de memoria al desmontar
Un $effect separado observa debouncedQuery y dispara la llamada a la API
El estado isSearching provee retroalimentación de carga

Técnicas clave: bind:value para retroalimentación inmediata, limpieza de $effect para gestión de timers, estado de búsqueda separado del estado con debounce, validación de longitud mínima de consulta.

Variaciones: Delays adaptativos basados en la longitud de la consulta, AbortController para cancelación de peticiones, caché de resultados, autocompletado desde búsquedas recientes.

2. Panel de Configuración con Sincronización en localStorage

El Problema: Los usuarios personalizan ajustes (tema, tamaño de fuente, notificaciones) pero todo se reinicia al actualizar la página, lo que obliga a reconfigurar en cada sesión.

La Solución: Persistir en localStorage, cargar al montar, guardar en cada cambio y aplicar los ajustes al DOM de inmediato.

<script>
	import { browser } from '$app/environment'

	let settings = $state({
		theme: 'light',
		fontSize: 16,
		notifications: true,
		autoSave: true,
		language: 'en'
	})

	// Load from localStorage on mount
	if (browser) {
		const saved = localStorage.getItem('app-settings')
		if (saved) {
			try {
				settings = { ...settings, ...JSON.parse(saved) }
			} catch (e) {
				console.error('Failed to parse saved settings')
			}
		}
	}

	// Save to localStorage whenever settings change
	$effect(() => {
		if (browser) {
			localStorage.setItem('app-settings', JSON.stringify(settings))

			// Apply theme
			document.documentElement.setAttribute('data-theme', settings.theme)
			document.documentElement.style.fontSize = `${settings.fontSize}px`
		}
	})
</script>

<div class="settings-panel">
	<h2>Settings</h2>

	<div class="setting">
		<label>
			Theme
			<select bind:value={settings.theme}>
				<option value="light">Light</option>
				<option value="dark">Dark</option>
				<option value="auto">Auto</option>
			</select>
		</label>
	</div>

	<div class="setting">
		<label>
			Font Size: {settings.fontSize}px
			<input type="range" bind:value={settings.fontSize} min="12" max="24" />
		</label>
	</div>

	<div class="setting">
		<label>
			<input type="checkbox" bind:checked={settings.notifications} />
			Enable notifications
		</label>
	</div>

	<div class="setting">
		<label>
			<input type="checkbox" bind:checked={settings.autoSave} />
			Auto-save changes
		</label>
	</div>

	<div class="setting">
		<label>
			Language
			<select bind:value={settings.language}>
				<option value="en">English</option>
				<option value="es">Español</option>
				<option value="fr">Français</option>
				<option value="de">Deutsch</option>
			</select>
		</label>
	</div>
</div>

<div class="preview">
	<p>This text respects your font size setting</p>
</div>

<style>
	.settings-panel {
		max-width: 500px;
		padding: 24px;
		background: var(--bg-secondary);
		border-radius: 8px;
	}

	.setting {
		margin-bottom: 20px;
	}

	label {
		display: block;
		font-weight: 500;
	}

	select,
	input[type='range'] {
		width: 100%;
		margin-top: 8px;
	}

	.preview {
		margin-top: 24px;
		padding: 20px;
		background: var(--bg-primary);
		border-radius: 8px;
	}
</style>

Cómo funciona paso a paso:

Inicializar los ajustes con valores por defecto en $state
Cargar desde localStorage al montar, combinar con los valores por defecto
$effect observa el objeto de ajustes y guarda en localStorage
El mismo $effect aplica los ajustes al DOM (tema, tamaño de fuente)
Verificar el contexto browser para compatibilidad con SSR
Try-catch alrededor del parseo JSON maneja la corrupción de datos

Técnicas clave: Combinación de bind:value/bind:checked para diferentes entradas, $effect para doble persistencia + aplicación, verificaciones de navegador para SSR, spread de objetos para fusión de datos parciales.

Consideraciones para producción: Estrategia de migración para nuevos ajustes, validación contra esquema, monitoreo de cuota de almacenamiento, sincronización entre pestañas mediante evento storage, cumplimiento de RGPD.

Variaciones: Sincronización con backend para múltiples dispositivos, importar/exportar como JSON, presets de ajustes, vista previa en tiempo real, pestañas categorizadas.

3. Formulario de Múltiples Pasos con Validación

El Problema: Los formularios extensos abruman a los usuarios. Necesitan indicación de progreso, capacidad de revisar pasos anteriores, retroalimentación de validación y la seguridad de que sus datos no se perderán.

La Solución: Patrón asistente con pasos lógicos, validación independiente por paso, progreso visual, navegación hacia adelante solo cuando es válido, navegación hacia atrás sin restricciones.

<script>
	let currentStep = $state(1)
	let formData = $state({
		// Step 1: Personal
		firstName: '',
		lastName: '',
		email: '',
		// Step 2: Address
		street: '',
		city: '',
		zipCode: '',
		country: 'us',
		// Step 3: Preferences
		newsletter: false,
		notifications: true,
		theme: 'light'
	})

	let step1Valid = $derived(
		formData.firstName.length > 0 &&
			formData.lastName.length > 0 &&
			/\S+@\S+\.\S+/.test(formData.email)
	)

	let step2Valid = $derived(
		formData.street.length > 0 && formData.city.length > 0 && /^\d{5}$/.test(formData.zipCode)
	)

	let canProceed = $derived(currentStep === 1 ? step1Valid : currentStep === 2 ? step2Valid : true)

	function nextStep() {
		if (currentStep < 3) currentStep++
	}

	function prevStep() {
		if (currentStep > 1) currentStep--
	}

	function handleSubmit(e) {
		e.preventDefault()
		console.log('Form submitted:', formData)
	}
</script>

<div class="wizard">
	<div class="progress">
		<div class="step" class:active={currentStep === 1} class:complete={currentStep > 1}>
			<span class="step-number">1</span>
			<span class="step-label">Personal</span>
		</div>
		<div class="step" class:active={currentStep === 2} class:complete={currentStep > 2}>
			<span class="step-number">2</span>
			<span class="step-label">Address</span>
		</div>
		<div class="step" class:active={currentStep === 3}>
			<span class="step-number">3</span>
			<span class="step-label">Preferences</span>
		</div>
	</div>

	<form onsubmit={handleSubmit}>
		{#if currentStep === 1}
			<div class="form-section">
				<h2>Personal Information</h2>
				<input bind:value={formData.firstName} placeholder="First Name" required />
				<input bind:value={formData.lastName} placeholder="Last Name" required />
				<input bind:value={formData.email} type="email" placeholder="Email" required />
			</div>
		{:else if currentStep === 2}
			<div class="form-section">
				<h2>Address</h2>
				<input bind:value={formData.street} placeholder="Street Address" required />
				<input bind:value={formData.city} placeholder="City" required />
				<input bind:value={formData.zipCode} placeholder="ZIP Code" pattern="\d{5}" required />
				<select bind:value={formData.country}>
					<option value="us">United States</option>
					<option value="ca">Canada</option>
					<option value="uk">United Kingdom</option>
				</select>
			</div>
		{:else}
			<div class="form-section">
				<h2>Preferences</h2>
				<label>
					<input type="checkbox" bind:checked={formData.newsletter} />
					Subscribe to newsletter
				</label>
				<label>
					<input type="checkbox" bind:checked={formData.notifications} />
					Enable notifications
				</label>
				<label>
					Theme:
					<select bind:value={formData.theme}>
						<option value="light">Light</option>
						<option value="dark">Dark</option>
						<option value="auto">Auto</option>
					</select>
				</label>
			</div>
		{/if}

		<div class="actions">
			{#if currentStep > 1}
				<button type="button" onclick={prevStep}>← Back</button>
			{/if}
			{#if currentStep < 3}
				<button type="button" onclick={nextStep} disabled={!canProceed}> Next → </button>
			{:else}
				<button type="submit">Complete</button>
			{/if}
		</div>
	</form>
</div>

<style>
	.wizard {
		max-width: 600px;
		margin: 0 auto;
	}

	.progress {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32px;
	}

	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.step:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 20px;
		left: 50%;
		width: 100%;
		height: 2px;
		background: #e5e5e5;
		z-index: -1;
	}

	.step.complete::after {
		background: #16a34a;
	}

	.step-number {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #e5e5e5;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.step.active .step-number {
		background: #0066cc;
		color: white;
	}

	.step.complete .step-number {
		background: #16a34a;
		color: white;
	}

	.form-section {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 24px;
	}

	input,
	select {
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	.actions {
		display: flex;
		gap: 12px;
		justify-content: space-between;
	}

	button {
		padding: 12px 24px;
		background: #0066cc;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
	}

	button:disabled {
		background: #ccc;
		cursor: not-allowed;
	}

	button[type='button'] {
		background: #666;
	}
</style>

Cómo funciona paso a paso:

Un único objeto formData contiene todos los campos a través de los pasos
currentStep controla la visibilidad mediante condicionales
Cada paso tiene un validador $derived solo para los campos relevantes
"Siguiente" deshabilitado hasta que el paso actual sea válido; "Atrás" siempre habilitado
Las clases CSS muestran el estado visual activo/completado/pendiente
El botón de envío solo en el paso final garantiza que se superó toda la validación

Técnicas clave: Fuente única de verdad para los datos del formulario, validación granular por paso, divulgación progresiva mediante {#if}, clases CSS reactivas, estados de botón condicionales.

Mejores prácticas de UX: Permitir siempre la navegación hacia atrás, validación estricta hacia adelante, seguimiento claro del progreso, persistencia de datos entre pasos, errores de campo en línea.

Accesibilidad: Landmarks ARIA progressbar, navegación por teclado, anuncios para lectores de pantalla mediante aria-live, gestión del foco en cambios de paso, resumen de errores para lectores de pantalla.

Mejoras para producción: Guardado automático en localStorage, enrutamiento basado en URL para los pasos, validación de campos en tiempo real (con debounce), omisión de pasos para usuarios avanzados, visualización del porcentaje de progreso, advertencia beforeunload.

Variaciones: Navegación no lineal, pasos condicionales basados en respuestas, paso de revisión antes del envío, guardar y retomar con URLs únicas, lógica de ramificación para diferentes rutas.

4. Constructor de Formularios Dinámico con Gestión Flexible de Campos

El Problema: Las aplicaciones necesitan formularios donde los usuarios puedan agregar/eliminar campos dinámicamente, configurar propiedades y reordenar elementos. Los formularios estáticos no pueden manejar constructores de encuestas, registros personalizados ni recolección de datos configurada por administradores.

La Solución: Sistema de meta-formulario que separa la configuración de campos de los datos del formulario. Los usuarios agregan/eliminan/configuran campos dinámicamente mientras todos los valores permanecen enlazados y reactivos.

<script>
	let fields = $state([
		{ id: 1, type: 'text', label: 'Name', value: '', required: true },
		{ id: 2, type: 'email', label: 'Email', value: '', required: true }
	])

	let nextId = $state(3)

	function addField(type) {
		fields = [
			...fields,
			{
				id: nextId++,
				type,
				label: `New ${type} field`,
				value: type === 'checkbox' ? false : '',
				required: false
			}
		]
	}

	function removeField(id) {
		fields = fields.filter((f) => f.id !== id)
	}

	function updateField(id, updates) {
		fields = fields.map((f) => (f.id === id ? { ...f, ...updates } : f))
	}

	let formValues = $derived(
		fields.reduce((acc, field) => {
			acc[field.label] = field.value
			return acc
		}, {})
	)

	let isValid = $derived(
		fields.every((field) => !field.required || (field.value && field.value !== ''))
	)
</script>

<div class="form-builder">
	<h2>Form Builder</h2>

	<div class="toolbar">
		<button onclick={() => addField('text')}>+ Text</button>
		<button onclick={() => addField('email')}>+ Email</button>
		<button onclick={() => addField('number')}>+ Number</button>
		<button onclick={() => addField('checkbox')}>+ Checkbox</button>
		<button onclick={() => addField('textarea')}>+ Text Area</button>
	</div>

	<form>
		{#each fields as field (field.id)}
			<div class="field-row">
				<input
					type="text"
					value={field.label}
					oninput={(e) => updateField(field.id, { label: e.target.value })}
					placeholder="Label"
				/>

				<label>
					<input
						type="checkbox"
						checked={field.required}
						onchange={(e) => updateField(field.id, { required: e.target.checked })}
					/>
					Required
				</label>

				{#if field.type === 'checkbox'}
					<label>
						<input type="checkbox" bind:checked={field.value} />
						{field.label}
					</label>
				{:else if field.type === 'textarea'}
					<textarea bind:value={field.value} placeholder={field.label}></textarea>
				{:else}
					<input type={field.type} bind:value={field.value} placeholder={field.label} />
				{/if}

				<button onclick={() => removeField(field.id)}>×</button>
			</div>
		{/each}
	</form>

	<div class="output">
		<h3>Form Data:</h3>
		<pre>{JSON.stringify(formValues, null, 2)}</pre>
		<p>Valid: {isValid ? '✓' : '✗'}</p>
	</div>
</div>

<style>
	.field-row {
		display: flex;
		gap: 8px;
		margin-bottom: 12px;
		padding: 12px;
		background: #f9f9f9;
		border-radius: 4px;
	}
	button {
		padding: 8px 12px;
		cursor: pointer;
	}
</style>

Cómo funciona: Metadatos de campos en un array, agregar/eliminar dinámicamente mediante operaciones de array, etiquetas editables, renderizado específico por tipo, valores enlazados, payload de envío derivado.

Técnicas clave: Array de campos heterogéneo, enlace a elementos del array, $derived para transformación, #each con clave mediante IDs, renderizado condicional por tipo.

Casos de uso: Constructores de encuestas, personalización de CRM, registro de eventos, herramientas de recolección de datos, configuración de formularios por administradores.

Mejoras para producción: Plantillas de campos, arrastrar y soltar, lógica condicional, validación avanzada, agrupación de campos, guardar como plantilla, colaboración en tiempo real.

Consideraciones de Rendimiento

Aunque los enlaces de Svelte están altamente optimizados, entender sus características de rendimiento te ayuda a construir aplicaciones más rápidas. La clave: los enlaces son simplemente azúcar sintáctico sobre escuchadores de eventos y asignaciones reactivas. Cuando se usan con sabiduría, son extremadamente eficientes. Cuando se usan incorrectamente con cálculos complejos o listas grandes, pueden convertirse en cuellos de botella.

Esta sección cubre los errores de rendimiento más comunes y sus soluciones, ayudándote a escribir enlaces que escalen desde prototipos hasta producción.

1. Debouncing de Operaciones Costosas

El Problema: Cada carácter escrito en una entrada enlazada dispara un evento input, que actualiza el estado, que activa cualquier expresión $derived que dependa de él. Si ese cálculo derivado es costoso (filtrar miles de elementos, cálculos complejos, llamadas a API), estás realizando trabajo costoso en cada pulsación de tecla.

Escenario de ejemplo: Un usuario escribe "svelte" en un cuadro de búsqueda. Eso son 6 pulsaciones de tecla, que disparan 6 filtros completos de lista, 6 operaciones de regex, 6 actualizaciones del DOM. Si tu lista tiene 10,000 elementos, acabas de realizar 60,000 operaciones de filtrado innecesariamente.

La Solución: Aplicar debounce a las operaciones costosas para esperar hasta que el usuario deje de escribir antes de realizar el trabajo pesado.

<!-- AVOID: Expensive operation on every keystroke -->
<script>
	let searchTerm = $state('')
	let products = $state([/* 10,000 products */])

	// This runs on EVERY keystroke - very expensive!
	let filtered = $derived(
		products.filter(product => {
			// Complex filtering logic
			const matchesName = product.name.toLowerCase().includes(searchTerm.toLowerCase())
			const matchesTags = product.tags.some(tag => tag.includes(searchTerm))
			const matchesDescription = product.description.toLowerCase().includes(searchTerm.toLowerCase())
			return matchesName || matchesTags || matchesDescription
		})
	)
</script>

<input bind:value={searchTerm} placeholder="Search products..." />
<p>{filtered.length} results</p>

<!-- PREFERRED: Debounce the expensive computation -->
<script>
	let searchTerm = $state('') // Updates instantly for UI feedback
	let debouncedSearch = $state('') // Updates after user stops typing
	let debounceTimer

	// Debounce the search term
	$effect(() => {
		clearTimeout(debounceTimer)
		debounceTimer = setTimeout(() => {
			debouncedSearch = searchTerm
		}, 300) // Wait 300ms after last keystroke

		// Cleanup function prevents memory leaks
		return () => clearTimeout(debounceTimer)
	})

	// Expensive operation only runs when debouncedSearch changes
	let filtered = $derived(
		products.filter(product => {
			const matchesName = product.name.toLowerCase().includes(debouncedSearch.toLowerCase())
			const matchesTags = product.tags.some(tag => tag.includes(debouncedSearch))
			const matchesDescription = product.description.toLowerCase().includes(debouncedSearch.toLowerCase())
			return matchesName || matchesTags || matchesDescription
		})
	)
</script>

<input bind:value={searchTerm} placeholder="Search products..." />
<p>{filtered.length} results</p>

Por qué funciona:

searchTerm se actualiza inmediatamente → el usuario ve lo que escribe sin retraso
debouncedSearch se actualiza 300ms después de que deja de escribir → el trabajo costoso se ejecuta una vez, no 6 veces
La función de limpieza garantiza que los temporizadores se borren correctamente al desmontar el componente

Impacto en el rendimiento: Para una lista de 10,000 elementos con una búsqueda de 6 caracteres, esto reduce las operaciones de 60,000 a 10,000—una mejora de 6x. Los usuarios no notan el retraso de 300ms porque aún están escribiendo.

Ajuste del retraso de debounce:

100-200ms: Bueno para escritores rápidos, se siente muy responsivo
300-400ms: Estándar, funciona para la mayoría de los casos de uso
500ms+: Se siente lento, úsalo solo para operaciones muy costosas

Alternativa: Throttling

Mientras que el debouncing espera hasta que se deja de escribir, el throttling limita las actualizaciones a una frecuencia máxima:

<script>
	let searchTerm = $state('')
	let debouncedSearch = $state('')
	let lastUpdate = 0

	$effect(() => {
		const now = Date.now()
		if (now - lastUpdate > 300) {
			debouncedSearch = searchTerm
			lastUpdate = now
		}
	})
</script>

El throttling proporciona actualizaciones periódicas durante la escritura, lo que puede sentirse más responsivo para búsquedas en tiempo real.

2. Evitar Enlaces en Listas Grandes

El Problema: Cuando enlazas a propiedades dentro de un bucle #each con cientos o miles de elementos, Svelte crea esa cantidad de enlaces bidireccionales. Cada enlace agrega un escuchador de eventos, y cuando los elementos se actualizan, todos esos escuchadores se disparan. Esto puede causar problemas de rendimiento durante actualizaciones rápidas.

Escenario de ejemplo: Una lista de tareas con 1,000 elementos, cada uno con una casilla de verificación. Al hacer clic en "Seleccionar todo" se disparan 1,000 actualizaciones individuales de enlace, cada una potencialmente activando la reactividad por separado.

<!-- AVOID: Bindings in large lists can be slow -->
<script>
	let todos = $state(Array.from({ length: 1000 }, (_, i) => ({
		id: i,
		text: `Todo ${i}`,
		completed: false
	})))

	function toggleAll() {
		const allCompleted = todos.every(todo => todo.completed)
		todos = todos.map(todo => ({ ...todo, completed: !allCompleted }))
	}
</script>

<!-- This creates 1,000 two-way bindings -->
{#each todos as todo (todo.id)}
	<label>
		<input type="checkbox" bind:checked={todo.completed} />
		{todo.text}
	</label>
{/each}

<!-- PREFERRED: Use event handlers for batch updates -->
<script>
	let todos = $state(Array.from({ length: 1000 }, (_, i) => ({
		id: i,
		text: `Todo ${i}`,
		completed: false
	})))

	function toggleTodo(id, completed) {
		// Create new array to trigger reactivity
		todos = todos.map(todo =>
			todo.id === id ? { ...todo, completed } : todo
		)
	}

	function toggleAll() {
		const allCompleted = todos.every(todo => todo.completed)
		todos = todos.map(todo => ({ ...todo, completed: !allCompleted }))
	}
</script>

{#each todos as todo (todo.id)}
	<label>
		<input
			type="checkbox"
			checked={todo.completed}
			onchange={(e) => toggleTodo(todo.id, e.target.checked)}
		/>
		{todo.text}
	</label>
{/each}

Por qué funciona:

Sin enlaces bidireccionales significa menos escuchadores de eventos
Las actualizaciones por lote se pueden optimizar (actualizar múltiples elementos en un solo paso)
Más fácil de agregar logging, analíticas o validación

Cuándo los enlaces aún son adecuados:

Listas de menos de ~100 elementos (los enlaces son muy eficientes a esta escala)
Los elementos se actualizan con poca frecuencia (el usuario marca casillas manualmente)
La simplicidad importa más que las microoptimizaciones

Avanzado: Listas Virtuales

Para listas realmente grandes (10,000+ elementos), considera virtualizar:

<script>
	import VirtualList from 'svelte-virtual-list'

	let items = $state(
		Array.from({ length: 100000 }, (_, i) => ({
			id: i,
			text: `Item ${i}`,
			selected: false
		}))
	)
</script>

<!-- Only renders visible items + buffer -->
<VirtualList {items} let:item height="400px">
	<label>
		<input
			type="checkbox"
			checked={item.selected}
			onchange={(e) => {
				item.selected = e.target.checked
				items = items
			}}
		/>
		{item.text}
	</label>
</VirtualList>

3. Enlaces vs. Manejadores de Eventos: Cuándo Usar Cada Uno

La Disyuntiva: Los enlaces son concisos y declarativos, pero los manejadores de eventos te dan más control. Entender cuándo usar cada uno mejora tanto la claridad del código como el rendimiento.

Usa bind: cuando:

Sincronización simple sin transformación
La relación es puramente declarativa: "esta entrada controla esta variable"
No se necesita validación ni efectos secundarios
Prototipado rápido donde la simplicidad importa

<!-- PREFERRED: Perfect use of bind: -->
<script>
	let username = $state('')
	let age = $state(0)
	let newsletter = $state(false)
</script>

<input type="text" bind:value={username} />
<input type="number" bind:value={age} />
<input type="checkbox" bind:checked={newsletter} />

Usa manejadores de eventos cuando:

Necesitas transformar o validar la entrada
Se requieren efectos secundarios (llamadas a API, analíticas)
Actualizaciones condicionales (solo actualizar si pasa la validación)
Lógica de negocio compleja rodea la actualización

<!-- PREFERRED: Event handler for complex logic -->
<script>
	let username = $state('')
	let usernameError = $state('')

	function handleUsernameInput(e) {
		let value = e.target.value

		// Transform: trim and lowercase
		value = value.trim().toLowerCase()

		// Validate
		if (value.length < 3) {
			usernameError = 'Username must be at least 3 characters'
		} else if (!/^[a-z0-9_]+$/.test(value)) {
			usernameError = 'Only letters, numbers, and underscores allowed'
		} else if (value.length > 20) {
			usernameError = 'Username too long'
			return // Don't update if too long
		} else {
			usernameError = ''
		}

		// Side effect: check availability
		checkUsernameAvailability(value)

		// Only update if valid
		username = value
	}
</script>

<input type="text" value={username} oninput={handleUsernameInput} aria-invalid={!!usernameError} />
{#if usernameError}
	<p class="error">{usernameError}</p>
{/if}

Comparación de rendimiento:

<!-- bind: is equivalent to this: -->
<input
	value={variable}
	oninput={(e) => {
		variable = e.target.value
	}}
/>

No hay diferencia de rendimiento entre bind: y una asignación simple con manejador de eventos. Las consideraciones de rendimiento provienen de lo que haces después de la asignación (derivaciones costosas, llamadas a API, etc.).

4. Memoización para Valores Derivados Costosos

El Problema: Las expresiones $derived se recalculan cada vez que cambian sus dependencias. Si un valor derivado depende de una entrada enlazada Y ese cálculo es costoso, estás realizando trabajo costoso en cada pulsación de tecla.

<!-- AVOID: Expensive calculation on every keystroke -->
<script>
	let csvData = $state('')

	// Parses CSV on every character typed!
	let parsedData = $derived.by(() => {
		const rows = csvData.split('\n')
		return rows.map((row) => row.split(','))
	})
</script>

<textarea bind:value={csvData}></textarea>

Solución: podemos usar debouncing y memoización

<!-- PREFERRED: Debounce + memoization -->
<script>
	let csvData = $state('')
	let debouncedCsv = $state('')
	let debounceTimer

	$effect(() => {
		clearTimeout(debounceTimer)
		debounceTimer = setTimeout(() => {
			debouncedCsv = csvData
		}, 500)
		return () => clearTimeout(debounceTimer)
	})

	// Only parses when user stops typing
	let parsedData = $derived.by(() => {
		if (!debouncedCsv) return []
		const rows = debouncedCsv.split('\n')
		return rows.map((row) => row.split(','))
	})
</script>

<textarea bind:value={csvData}></textarea><p>Rows: {parsedData.length}</p>

5. Actualizaciones por Lote para Múltiples Enlaces

El Problema: Cuando múltiples valores enlazados cambian simultáneamente (por ejemplo, al reiniciar un formulario), cada enlace activa la reactividad de forma independiente. Esto puede causar re-renderizados innecesarios.

<!-- AVOID: Multiple separate updates -->
<script>
	let firstName = $state('')
	let lastName = $state('')
	let email = $state('')

	function resetForm() {
		firstName = '' // Triggers reactivity
		lastName = '' // Triggers reactivity
		email = '' // Triggers reactivity
		// 3 separate updates!
	}
</script>

Solución: Usar actualización por lote

<!-- PREFERRED: Batch update with object state -->
<script>
	let formData = $state({
		firstName: '',
		lastName: '',
		email: ''
	})

	function resetForm() {
		// Single object update triggers reactivity once
		formData = { firstName: '', lastName: '', email: '' }
	}
</script>

<input bind:value={formData.firstName} />
<input bind:value={formData.lastName} />
<input bind:value={formData.email} />

Por qué funciona: La reactividad de Svelte es lo suficientemente inteligente como para agrupar las actualizaciones del mismo objeto, reduciendo la sobrecarga de re-renderizado.

6. Evitar Enlaces de Dimensiones Innecesarios

El Problema: Los enlaces de dimensiones (clientWidth, offsetHeight, etc.) usan ResizeObserver, que dispara callbacks en cada cambio de tamaño. Enlazar dimensiones en muchos elementos puede afectar el rendimiento.

<!-- PREFERRED: Bind only to the container -->
<script>
	let containerWidth = $state(0)
	let containerHeight = $state(0)
</script>

<!-- AVOID: Binding dimensions on every item -->
{#each items as item}
	<div bind:clientWidth={item.width} bind:clientHeight={item.height}>
		{item.content}
	</div>
{/each}

<div bind:clientWidth={containerWidth} bind:clientHeight={containerHeight}>
	{#each items as item}
		<div>
			{item.content}
			<!-- Calculate item size based on container -->
		</div>
	{/each}
</div>

Principio clave: Medir una vez a nivel del contenedor, calcular los tamaños de los hijos con CSS o JavaScript.

Resumen de Rendimiento

HAZ:

Aplica debounce a las operaciones costosas activadas por enlaces
Usa manejadores de eventos para lógica compleja en lugar de enlaces
Agrupa las actualizaciones agrupando el estado relacionado en objetos
Mide el rendimiento con datos reales (no optimices prematuramente)
Considera listas virtuales para 1,000+ elementos

NO HAGAS:

Enlazar a cálculos $derived costosos que se ejecutan en cada pulsación de tecla
Usar enlaces en listas grandes sin medir el rendimiento primero
Enlazar dimensiones en cada elemento de una lista
Optimizar enlaces antes de tener un problema de rendimiento

Recuerda: Los enlaces de Svelte están altamente optimizados. La mayoría de los problemas de rendimiento provienen de cálculos costosos o del renderizado de listas grandes—no de los enlaces en sí. Perfila tu aplicación antes de optimizar.

Mejores Prácticas de Accesibilidad

Los enlaces no hacen que los formularios sean accesibles automáticamente. Sigue siempre estas pautas:

1. Usa etiquetas adecuadas

Cada input debe tener una etiqueta asociada:

<!-- AVOID: No label -->
<input bind:value={email} />

<!-- PREFERRED: Explicit label -->
<label for="email">Email</label>
<input id="email" type="email" bind:value={email} />

<!-- PREFERRED: Implicit label -->
<label>
	Email
	<input type="email" bind:value={email} />
</label>

2. Proporciona retroalimentación de errores

Usa atributos ARIA para anunciar errores a los lectores de pantalla:

<script>
	let email = $state('')
	let touched = $state(false)
	let isValid = $derived(/\S+@\S+\.\S+/.test(email))
	let showError = $derived(touched && !isValid && email.length > 0)
</script>

<label for="email">Email</label>
<input
	id="email"
	type="email"
	bind:value={email}
	onblur={() => (touched = true)}
	aria-invalid={showError}
	aria-describedby={showError ? 'email-error' : undefined}
/>

{#if showError}
	<p id="email-error" role="alert">Please enter a valid email address</p>
{/if}

3. Usa fieldsets para grupos

Agrupa inputs relacionados con <fieldset> y <legend>:

<fieldset>
	<legend>Shipping Method</legend>

	<label>
		<input type="radio" bind:group={shipping} value="standard" />
		Standard (5-7 days)
	</label>

	<label>
		<input type="radio" bind:group={shipping} value="express" />
		Express (2-3 days)
	</label>
</fieldset>

Resumen de buenas prácticas

Usa bind: para sincronización bidireccional simple: Los formularios e inputs se benefician de la brevedad del binding
Prefiere manejadores de eventos para lógica compleja: La validación, el formateo y los efectos secundarios requieren control explícito
Marca las props de componentes como $bindable: Habilita el binding bidireccional padre-hijo cuando sea apropiado
Protégete contra undefined en inputs numéricos: Los inputs numéricos vacíos se convierten en undefined—maneja esto de forma explícita
Usa bind:group para grupos de checkboxes/radios: Gestiona arreglos de selecciones de forma limpia
Aplica debounce a operaciones costosas: No recalcules en cada pulsación de tecla
Siempre proporciona etiquetas: La accesibilidad no es negociable
Valida los valores iniciales de select: Asegúrate de que los valores enlazados coincidan con los valores de las opciones
Usa bind:this para acceso al DOM: Captura referencias para APIs imperativas
Combina bindings con validación: Muestra retroalimentación clara a los usuarios

Referencia rápida

<!-- Text inputs -->
<input type="text" bind:value={text} />
<textarea bind:value={text}></textarea>

<!-- Number inputs (auto-convert to number) -->
<input type="number" bind:value={number} />
<input type="range" bind:value={number} min="0" max="100" />

<!-- Single checkbox (boolean) -->
<input type="checkbox" bind:checked={boolean} />
<input type="checkbox" bind:indeterminate />

<!-- Checkbox group (array) -->
<input type="checkbox" bind:group={array} value="option1" />
<input type="checkbox" bind:group={array} value="option2" />

<!-- Radio buttons (string/number/object) -->
<input type="radio" bind:group={selected} value="a" />
<input type="radio" bind:group={selected} value="b" />

<!-- Select dropdown -->
<select bind:value={selected}>
	<option value="a">A</option>
	<option value="b" selected>B</option>
</select>

<!-- Select multiple (array) -->
<select bind:value={array} multiple>
	<option value="a">A</option>
	<option value="b">B</option>
</select>

<!-- File input -->
<input type="file" bind:files accept="image/*" multiple />

<!-- Details element -->
<details bind:open={isOpen}>
	<summary>Click to toggle</summary>
	<p>Content</p>
</details>

<!-- Contenteditable -->
<div contenteditable bind:innerHTML={html}></div>
<div contenteditable bind:innerText={text}></div>
<div contenteditable bind:textContent={text}></div>

<!-- Media (two-way) -->
<video bind:currentTime bind:playbackRate bind:paused bind:volume bind:muted></video>

<!-- Media (readonly) -->
<video
	bind:duration
	bind:buffered
	bind:seeking
	bind:ended
	bind:readyState
	bind:videoWidth
	bind:videoHeight
></video>

<!-- Image (readonly) -->
<img bind:naturalWidth bind:naturalHeight />

<!-- Dimensions (readonly) -->
<div bind:clientWidth bind:clientHeight bind:offsetWidth bind:offsetHeight bind:contentRect></div>

<!-- Element reference -->
<input bind:this={inputElement} />

<!-- Component binding -->
<Child bind:value={parentValue} />

<!-- Function binding (Svelte 5.9+) -->
<input bind:value={() => value, (v) => (value = v.toUpperCase())} />

Conclusión

La directiva bind: representa una de las características más poderosas de Svelte para construir interfaces de usuario interactivas: flujo de datos bidireccional que sincroniza automáticamente el estado del DOM con el estado del componente. Al abstraer el cableado manual de event listeners, la extracción de valores y las actualizaciones de estado requeridas en JavaScript puro, bind: transforma lo que serían docenas de líneas de código imperativo en un único atributo declarativo. Desde inputs de formularios simples hasta composiciones de componentes complejas, el binding bidireccional proporciona la base para interfaces reactivas e interactivas.

Dominar bind: requiere entender sus diversas formas y casos de uso apropiados. Los bindings de elementos de formulario (bind:value, bind:checked) manejan la entrada del usuario. Los bindings de dimensiones (bind:clientWidth) permiten diseños responsivos. Los bindings de componentes con $bindable() crean patrones de comunicación padre-hijo poderosos. La clave está en reconocer cuándo el binding bidireccional simplifica tu código versus cuándo el flujo de datos unidireccional con manejadores de eventos explícitos proporciona una mejor arquitectura. Al combinar bind: con $derived para transformaciones calculadas y $effect para efectos secundarios ante cambios en valores enlazados, puedes construir sistemas reactivos sofisticados y mantenibles.

Puntos clave

bind: crea flujo de datos bidireccional sincronizando automáticamente los valores del DOM con el estado del componente y viceversa, eliminando el código repetitivo de event listeners manuales y actualizaciones de estado
Los bindings de elementos de formulario manejan la entrada del usuario con bind:value para inputs de texto/número, bind:checked para checkboxes, bind:group para botones de radio, y bind:files para inputs de archivos
Los bindings de dimensiones proporcionan datos de diseño responsivo - bind:clientWidth, bind:clientHeight, bind:offsetWidth, bind:offsetHeight rastrean las dimensiones de los elementos de forma reactiva
Los bindings de componentes requieren props $bindable() en el componente hijo para optar por el binding bidireccional: let { value = $bindable() } = $props()
bind:this captura referencias a elementos para acceso programático al DOM: let element; bind:this={element} almacena el nodo DOM en una variable
La coerción de tipos ocurre automáticamente con type="number" convirtiendo los inputs de cadena a números, <input bind:value={numericState} type="number"> popula el estado con tipos numéricos
Los bindings de grupo habilitan conjuntos de radios/checkboxes - múltiples elementos con bind:group={selectedValue} se sincronizan a una única variable de estado, almacenando el/los valor(es) seleccionado(s)
Los bindings de función transforman valores (Svelte 5.9+): bind:value={(() => getter, (v) => setter)} aplica lógica personalizada durante las operaciones de get/set

Ver también

Documentación oficial de Svelte 5 - bind:
$state - Estado reactivo que los bindings actualizan
$bindable() - Hacer que las props de componentes sean enlazables
$derived - Valores calculados a partir del estado enlazado
$effect - Efectos secundarios disparados por cambios en valores enlazados
Validación de formularios - Patrones de validación de formularios del lado del cliente
MDN - Tipos de input - Comprender los tipos de elementos input de HTML

Flujo de Datos Bidireccional Simplificado

Comprendiendo el Flujo de Datos

El Flujo de Datos Unidireccional por Defecto

El Atajo del Enlace Bidireccional

Cuándo Usar Cada Enfoque

Bindings Básicos de Inputs

Inputs de Texto: bind:value

Inputs Numéricos: Coerción de Tipo Automática

Valores por Defecto y Reset de Formularios

Bindings de Casillas de Verificación

Casilla de Verificación Individual: bind:checked

Estado Indeterminado: bind:indeterminate

Grupos de Checkboxes: bind:group

Grupos de Botones de Radio

Menús Desplegables Select

Select Simple: bind:value

Select Múltiple: bind:value con Arreglo

Inputs de Archivo: bind:files

Enlaces de Elementos Multimedia

Enlaces Multimedia Bidireccionales

Enlaces Multimedia de Solo Lectura

Enlaces Específicos de Video

Enlaces de Elementos de Imagen

Elemento Details: bind:open

Enlaces de Contenteditable

Enlaces de Dimensiones (Solo lectura)

Referencias a Elementos: bind:this

Referencias a Instancias de Componentes

Enfoque Imperativo (usando bind:this):

Enfoque Declarativo (preferido en Svelte 5):

¿Cuándo usar cada enfoque?

Enfoque híbrido

Enlaces de Props de Componentes con $bindable

Hacer Props Enlazables

Múltiples Props Enlazables

Componentes de Input Personalizados

Bindings de Función (Avanzado)

Problemas Comunes y Soluciones

1: Binding a Valores Derivados

2: Inputs Numéricos que se Vuelven undefined

3: Binding a Propiedades de Array/Objeto

4: Binding Sin $bindable

5: Grupo de Checkboxes vs. Booleanos Individuales

6: Select que No Muestra el Valor Inicial

Patrones del Mundo Real

1. Input de Búsqueda con Debounce

2. Panel de Configuración con Sincronización en localStorage

3. Formulario de Múltiples Pasos con Validación

4. Constructor de Formularios Dinámico con Gestión Flexible de Campos

Consideraciones de Rendimiento

1. Debouncing de Operaciones Costosas

2. Evitar Enlaces en Listas Grandes

3. Enlaces vs. Manejadores de Eventos: Cuándo Usar Cada Uno

4. Memoización para Valores Derivados Costosos

5. Actualizaciones por Lote para Múltiples Enlaces

6. Evitar Enlaces de Dimensiones Innecesarios

Resumen de Rendimiento

Mejores Prácticas de Accesibilidad

1. Usa etiquetas adecuadas

2. Proporciona retroalimentación de errores

3. Usa fieldsets para grupos

Resumen de buenas prácticas

Referencia rápida

Conclusión

Puntos clave

Ver también

Inputs de Texto: `bind:value`

Casilla de Verificación Individual: `bind:checked`

Estado Indeterminado: `bind:indeterminate`

Grupos de Checkboxes: `bind:group`

Select Simple: `bind:value`

Select Múltiple: `bind:value` con Arreglo

Inputs de Archivo: `bind:files`

Elemento Details: `bind:open`

Enfoque Imperativo (usando `bind:this`):

Enlaces de Props de Componentes con `$bindable`

2: Inputs Numéricos que se Vuelven `undefined`

4: Binding Sin `$bindable`