How to work with props in Svelte

Props are how a parent component passes data to a child component in Svelte. The child declares a prop with export let, and the parent sets it like an HTML attribute.

Let’s build up to that. You can import a Svelte component into any other component using the syntax import ComponentName from 'componentPath':

<script>
import SignupForm from './SignupForm.svelte';
</script>

The path is relative to the current component path. ./ means “this same folder”. You’d use ../ to go back one folder, and so on.

Once you do so, you can use the newly imported component in the markup, like an HTML tag:

<SignupForm />

In this way, you are forming a parent/child relationship between the two components: the one that imports, and the one that is imported.

Often you want to have the parent component pass data to the child component.

You can do so using props. Props behave similarly to attributes in plain HTML, and they are a one-way form of communication, from parent to child.

In this example we pass the disabled prop, passing the JavaScript value true to it:

<SignupForm disabled={true}/>

In the SignupForm component, you need to export the disabled prop, in this way:

<script>
  export let disabled
</script>

This is the way you express the fact that the prop is exposed to parent components.

The export keyword looks odd here, and it trips up people coming from other frameworks. Forgetting it is the most common mistake: the parent passes the prop, the child never sees it, and in development Svelte logs a warning like <SignupForm> was created with unknown prop 'disabled'. The fix is adding the export let declaration in the child.

Default values

You can give a prop a default value, which makes it optional:

<script>
  export let disabled = false
</script>

If the parent doesn’t pass disabled, the child uses false.

String props can be passed without curly braces, like regular HTML attributes:

<SignupForm title="Create an account"/>

Passing variables

When using the component, you can pass a variable instead of a value, to change it dynamically:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>

<SignupForm disabled={disabled}/>

Since the variable name matches the prop name, you can use the shorthand form:

<SignupForm {disabled}/>

When the disabled variable value changes, the child component will be updated with the new prop value. Example:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>

<SignupForm disabled={disabled}/>

Here the form starts disabled, and after 2 seconds Svelte updates the child with the new value. You don’t have to do anything special: assigning to the variable is enough.

Remember the communication is one-way. If the child reassigns disabled internally, the parent’s variable does not change. Svelte has bind: for two-way binding, but that’s a different topic.