Svelte logo

Svelte by Example: Data

Svelte uses <script> tags to set up a component. Variables declared in the script tag are made accessible to the template.

In this example, we'll create a component with a checkbox.

To add data to your component, introduce a script tag with a variable. In practice, Svelte components have the script tag at the top of the file.

Print data in templates with curly braces. Data can also be used in attributes.

When the variable name matches the attribute, you can use shorthand notation instead.

Todo.svelte
<script>
  let checked = false;
</script>



<input type="checkbox" checked={checked}>

<input type="checkbox" {checked}>