Checkboxes are used for toggling between states. Instead of binding to input.value
, we bind to input.checked
:
<input type=checkbox bind:checked={yes}>
App.svelte
xxxxxxxxxx
18
1
<script>
2
let yes = false;
3
</script>
4
5
<label>
6
<input type=checkbox checked={yes}>
7
Yes! Send me regular email spam
8
</label>
9
10
{#if yes}
11
<p>Thank you. We will bombard your inbox and sell your personal details.</p>
12
{:else}
13
<p>You must opt in to continue. If you're not paying, you're the product.</p>
14
{/if}
15
16
<button disabled={!yes}>
17
Subscribe
18
</button>
Console
xxxxxxxxxx
115
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
append,
5
attr,
6
detach,
7
element,
8
init,
9
insert,
10
noop,
11
safe_not_equal,
12
space,
13
text
14
} from "svelte/internal";
15
16
function create_else_block(ctx) {
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */