Bindings

Hello Thor!

This section demonstrates binding an input value to a variable.

xml

<input class="mx-4 my-2 text-surface-800 p-2 rounded-md bg-tertiary-200" bind:value={name} />

1 + 2 = 3

This section demonstrates binding input types number and range to variables.

xml

<label class="block mx-4 my-2">
	<input
		class="text-surface-800 my-2 p-2 rounded-md bg-tertiary-200"
		type="number"
		bind:value={a}
		min="0"
		max="10"
	/>
	<input class="text-surface-800 my-2" type="range" bind:value={a} min="0" max="10" />
</label>

Yes! Send me regular email spam

You must opt in to continue. If you're not paying, you're the product.

This section demonstrates using bind:checked to toggle states.

xml

<label class="mx-4 my-2">
	<input class="my-2" type="checkbox" bind:checked={yes} />
	Yes! Send me regular email spam
</label>

Insecurity Questions

You've selected question [waiting...]

This form uses bind:value with a select element.

xml

<select
	class="text-surface-800 p-2 rounded-md bg-tertiary-200"
	bind:value={selected}
	on:change={() => (answer = '')}
>
	{#each questions as question}
		<option class="text-surface-800" value={question}>
			{question.text}
		</option>
	{/each}
</select>

<input class="text-surface-800 p-2 rounded-md bg-tertiary-200" bind:value={answer} />

Size

1 Scoop 2 Scoops 3 Scoops

Flavours

Please select at least one flavour.

This section demonstrates using bind:group for radio inputs, and bind:value with select multiple.

xml

<input type="radio" name="scoops" value={number} bind:group={scoops} />

Input

Output

Some words are italic, some are bold

lists
are
cool

This section binds a value to a textarea.

xml

<textarea class="flex-[1] resize-none text-surface-800 p-2 rounded-md bg-tertiary-200" bind:value></textarea>