radio bind:group • Playground • Svelte

App.svelte

const values = [

{ label: 'ten', value: 10 },

{ label: 'twenty', value: 20 },

{ label: 'thirty', value: 30 }

];

let selected = values[1];

</script>

{#each values as value}

<label>

<input

type="radio"

bind:group={selected}

name="amount"

value={value}

> {value.label}

</label>

{/each}

{selected.value}

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

var root_1 = $.template(`<label><input type="radio" name="amount"> </label>`);

var root = $.template(`<!> `, 1);

export default function App($$anchor) {

const binding_group = [];

const values = [

{ label: 'ten', value: 10 },

{ label: 'twenty', value: 20 },

{ label: 'thirty', value: 30 }

];

let selected = $.mutable_state(values[1]);

var fragment = root();

var node = $.first_child(fragment);

$.each(node, 1, () => values, $.index, ($$anchor, value) => {

var label = root_1();

var input = $.child(label);

$.remove_input_defaults(input);

var input_value;

var text = $.sibling(input);

$.reset(label);

$.template_effect(() => {

if (input_value !== (input_value = $.get(value))) {

input.value = null == (input.__value = $.get(value)) ? '' : $.get(value);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 169
end: 339
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 167
end: 169
raw: "\n\n"
data: "\n\n"
 }
 EachBlock {...}
 type: "EachBlock"
start: 169
end: 321
expression: Identifier {...}
 type: "Identifier"
start: 176
end: 182
loc:  {...}
 start:  {...}
 line: 11
column: 7
 }
end:  {...}
 line: 11
column: 13
 }
 }
name: "values"
 }
body: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 192
end: 194
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 194
end: 313
name: "label"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 201
end: 204
raw: "\n\t\t"
data: "\n\t\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 204
end: 289
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 214
end: 226
name: "type"
value: [...] (1)
  Text {...}
 start: 220
end: 225
type: "Text"
raw: "radio"
data: "radio"
 }
 ]
 }
 BindDirective {...}
 start: 230
end: 251
type: "BindDirective"
name: "group"
expression: Identifier {...}
 type: "Identifier"
start: 242
end: 250
loc:  {...}
 start:  {...}
 line: 15
column: 15
 }
end:  {...}
 line: 15
column: 23
 }
 }
name: "selected"
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 255
end: 268
name: "name"
value: [...] (1)
  Text {...}
 start: 261
end: 267
type: "Text"
raw: "amount"
data: "amount"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 272
end: 285
name: "value"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 278
end: 285
expression: Identifier {...}
 type: "Identifier"
start: 279
end: 284
loc:  {...}
 start:  {...}
 line: 17
column: 10
 }
end:  {...}
 line: 17
column: 15
 }
 }
name: "value"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 289
end: 290
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 290
end: 303
expression: MemberExpression {...}
 type: "MemberExpression"
start: 291
end: 302
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 16
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 291
end: 296
loc:  {...}
 start:  {...}
 line: 18
column: 5
 }
end:  {...}
 line: 18
column: 10
 }
 }
name: "value"
 }
property: Identifier {...}
 type: "Identifier"
start: 297
end: 302
loc:  {...}
 start:  {...}
 line: 18
column: 11
 }
end:  {...}
 line: 18
column: 16
 }
 }
name: "label"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 303
end: 305
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 313
end: 314
raw: "\n"
data: "\n"
 }
 ]
 }
context: Identifier {...}
 type: "Identifier"
name: "value"
start: 186
loc:  {...}
 start:  {...}
 line: 11
column: 17
character: 186
 }
end:  {...}
 line: 11
column: 22
character: 191
 }
 }
end: 191
typeAnnotation: undefined
 }
index: undefined
key: undefined
 }
 Text {...}
 type: "Text"
start: 321
end: 323
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 323
end: 339
expression: MemberExpression {...}
 type: "MemberExpression"
start: 324
end: 338
loc:  {...}
 start:  {...}
 line: 22
column: 1
 }
end:  {...}
 line: 22
column: 15
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 324
end: 332
loc:  {...}
 start:  {...}
 line: 22
column: 1
 }
end:  {...}
 line: 22
column: 9
 }
 }
name: "selected"
 }
property: Identifier {...}
 type: "Identifier"
start: 333
end: 338
loc:  {...}
 start:  {...}
 line: 22
column: 10
 }
end:  {...}
 line: 22
column: 15
 }
 }
name: "value"
 }
computed: false
optional: false
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 167
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 158
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 9
column: 0
 }
 }
body: [...] (2)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 128
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 6
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 16
end: 127
loc:  {...}
 start:  {...}
 line: 2
column: 7
 }
end:  {...}
 line: 6
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 16
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 7
 }
end:  {...}
 line: 2
column: 13
 }
 }
name: "values"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 25
end: 127
loc:  {...}
 start:  {...}
 line: 2
column: 16
 }
end:  {...}
 line: 6
column: 2
 }
 }
elements: [...] (3)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 29
end: 56
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 29
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 31
end: 43
loc:  {...}
 start:  {...}
 line: 3
column: 4
 }
end:  {...}
 line: 3
column: 16
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 31
end: 36
loc:  {...}
 start:  {...}
 line: 3
column: 4
 }
end:  {...}
 line: 3
column: 9
 }
 }
name: "label"
 }
value: Literal {...}
 type: "Literal"
start: 38
end: 43
loc:  {...}
 start:  {...}
 line: 3
column: 11
 }
end:  {...}
 line: 3
column: 16
 }
 }
value: "ten"
raw: "'ten'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 45
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 18
 }
end:  {...}
 line: 3
column: 27
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 45
end: 50
loc:  {...}
 start:  {...}
 line: 3
column: 18
 }
end:  {...}
 line: 3
column: 23
 }
 }
name: "value"
 }
value: Literal {...}
 type: "Literal"
start: 52
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 25
 }
end:  {...}
 line: 3
column: 27
 }
 }
value: 10
raw: "10"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 60
end: 90
loc:  {...}
 start:  {...}
 line: 4
column: 2
 }
end:  {...}
 line: 4
column: 32
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 62
end: 77
loc:  {...}
 start:  {...}
 line: 4
column: 4
 }
end:  {...}
 line: 4
column: 19
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 62
end: 67
loc:  {...}
 start:  {...}
 line: 4
column: 4
 }
end:  {...}
 line: 4
column: 9
 }
 }
name: "label"
 }
value: Literal {...}
 type: "Literal"
start: 69
end: 77
loc:  {...}
 start:  {...}
 line: 4
column: 11
 }
end:  {...}
 line: 4
column: 19
 }
 }
value: "twenty"
raw: "'twenty'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 79
end: 88
loc:  {...}
 start:  {...}
 line: 4
column: 21
 }
end:  {...}
 line: 4
column: 30
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 79
end: 84
loc:  {...}
 start:  {...}
 line: 4
column: 21
 }
end:  {...}
 line: 4
column: 26
 }
 }
name: "value"
 }
value: Literal {...}
 type: "Literal"
start: 86
end: 88
loc:  {...}
 start:  {...}
 line: 4
column: 28
 }
end:  {...}
 line: 4
column: 30
 }
 }
value: 20
raw: "20"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 94
end: 124
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 32
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 96
end: 111
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 5
column: 19
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 96
end: 101
loc:  {...}
 start:  {...}
 line: 5
column: 4
 }
end:  {...}
 line: 5
column: 9
 }
 }
name: "label"
 }
value: Literal {...}
 type: "Literal"
start: 103
end: 111
loc:  {...}
 start:  {...}
 line: 5
column: 11
 }
end:  {...}
 line: 5
column: 19
 }
 }
value: "thirty"
raw: "'thirty'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 113
end: 122
loc:  {...}
 start:  {...}
 line: 5
column: 21
 }
end:  {...}
 line: 5
column: 30
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 113
end: 118
loc:  {...}
 start:  {...}
 line: 5
column: 21
 }
end:  {...}
 line: 5
column: 26
 }
 }
name: "value"
 }
value: Literal {...}
 type: "Literal"
start: 120
end: 122
loc:  {...}
 start:  {...}
 line: 5
column: 28
 }
end:  {...}
 line: 5
column: 30
 }
 }
value: 30
raw: "30"
 }
kind: "init"
 }
 ]
 }
 ]
 }
 }
 ]
kind: "const"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 132
end: 157
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 26
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 136
end: 156
loc:  {...}
 start:  {...}
 line: 8
column: 5
 }
end:  {...}
 line: 8
column: 25
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 136
end: 144
loc:  {...}
 start:  {...}
 line: 8
column: 5
 }
end:  {...}
 line: 8
column: 13
 }
 }
name: "selected"
 }
init: MemberExpression {...}
 type: "MemberExpression"
start: 147
end: 156
loc:  {...}
 start:  {...}
 line: 8
column: 16
 }
end:  {...}
 line: 8
column: 25
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 147
end: 153
loc:  {...}
 start:  {...}
 line: 8
column: 16
 }
end:  {...}
 line: 8
column: 22
 }
 }
name: "values"
 }
property: Literal {...}
 type: "Literal"
start: 154
end: 155
loc:  {...}
 start:  {...}
 line: 8
column: 23
 }
end:  {...}
 line: 8
column: 24
 }
 }
value: 1
raw: "1"
 }
computed: true
optional: false
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern