How Attributes Work in Svelte

Attributes work exactly the same way they do in HTML. However, in Svelte, they are empowered. For example, values can be written without quotes:

<!-- They may be unqouted -->
<input type=checkbox />

They can also contain JavaScript expressions:

<!-- They can contain JavaScript expressions -->
<input type=checkbox checked={user.consentGiven}  />

When the name of the attribute and its value matches, you can omit the attribute name like so:

<!-- These two are equivalent -->
<input type=checkbox disabled={disabled} />
<input type=checkbox {disabled} />

And just like in React, you can pass multiple props, using the spread operator:

<!-- Passing multiple props with the spread operator -->
<Sidebar {...props} />

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Attributes and props in Svelte