How to work with props in Svelte

Props are how a parent component passes data to a child component in Svelte. In Svelte 5 you declare them with $props(). The parent sets them like HTML attributes.

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. If you’re new to Svelte, start with getting started with Svelte and then come back here for props.

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

<SignupForm disabled={true}/>

In the SignupForm component, you declare the prop with $props():

<script>
  let { disabled } = $props()
</script>

Destructuring $props() is how you tell Svelte which values the parent can pass in.

Older Svelte code used export let disabled for the same idea. That still works in legacy mode for compatibility, but new Svelte 5 components should use $props().

Forgetting to declare the prop is a common mistake: the parent passes it, the child never sees it, and nothing warns you. Svelte 4 logged an “unknown prop” warning in development, Svelte 5 removed it. So when a prop looks like it never arrives, check the $props() destructuring in the child first.

Default values

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

<script>
  let { disabled = false } = $props()
</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 = $state(true)
</script>

<SignupForm disabled={disabled}/>

$state makes disabled reactive in Svelte 5. Assigning a new value updates anything that depends on it, including the child prop. For more on that, see Svelte state management.

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 = $state(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 $state variable is enough.

Remember the communication is one-way. If the child reassigns disabled internally, the parent’s variable does not change. In Svelte 5, two-way binding needs $bindable() on the child prop plus bind: from the parent. That’s a different topic from plain props.

Want me to talk about your product? You can sponsor this site.