Lily Design System™

Svelte-handleiding

Lily's Svelte-bibliotheek is de canonieke implementatie: Svelte 5-runes, getypeerde props, rest-prop-spreiding en tweerichtingsbinding met bind:value.

Wat je gaat bouwen

Een klein contactformulier — invoerveld met label, verzendknop, tweerichtingsbinding, echt toetsenbord- en schermlezergedrag — eerst kaal, dan vormgegeven, in ongeveer 10 minuten.

Voordat je begint

Je hebt git, Node 22 of nieuwer en pnpm 10 of nieuwer nodig. Elk Svelte 5-project werkt — een gloednieuwe npx sv create -app is genoeg.

Stap 1 — Haal de code op

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

De componenten staan in src/lib/components/{Name}/, één map per component met het .svelte -bestand, zijn tests, zijn stories en zijn documentatie naast elkaar. Kopieer de mappen die je nodig hebt naar je app, of hang aan de repo en importeer rechtstreeks.

Stap 2 — Je eerste component

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

Rendert <button class="button" type="button">. De props zijn getypeerd: type, disabled, pressed (rendert aria-pressed (rendert label (een aria-label voor schakelknoppen),

Stap 3 — Stel een klein formulier samen

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field neemt het zichtbare label als eigen prop in plaats van een geneste labelcomponent — geef het één keer door, op Fielden TextInputvan label levert de toegankelijke naam. TextInput's value om te overschrijven) en elk extra attribuut wordt op de root uitgespreid. $bindable is een bind:value -rune-prop, dus

Geverifieerd op 2026-08-29: geeft je meteen tweerichtingsbinding. svelte/server dit exacte fragment is gecompileerd via <label for> en gecontroleerd op één enkel, juist gekoppeld label Label binnen Field— een eerder concept nestelde een aparte twee labels (een leeg) rendert omdat Field zijn eigen label al rendert vanuit de label erin, wat het volgende rendert: De samengestelde contactformulierroute is hetzelfde patroon, beproefd met echte e2e- en axe-tests.

Controleer je werk: start de app en het formulier ziet er kaal uit — precies zoals bedoeld: de vormgeving komt nog. Druk op Tab: de focus beweegt door elk bedieningselement, het label wordt voorgelezen en verzenden werkt. Het gedrag is klaar; het uiterlijk is aan jou en komt hierna.

Stap 4 — Geef het vorm

Alles hierboven wordt als pure structuur gerenderd, klaar voor je stijlen. Geef de klassehaken vorm — .button, .text-input, .label, .field — in je globale stylesheet, of koppel een kant-en-klaar thema in app.html: 

<link rel="stylesheet" href="/themes/dark.css" />

Aanpassingen per instantie lopen via de class -prop, die aan de basishaak wordt toegevoegd: <Button class="wide"> rendert class="button wide".

Stap 5 — Zie alles werken

SvelteKit voorbeeld-app is dezelfde catalogus volledig vormgegeven, met live demo's, Playwright e2e-tests en een axe-core-toegankelijkheidsbasislijn: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

Volgende stappen

Vragen onderweg? De helppagina staat vol antwoorden — en als een stap duidelijker kan, laat het ons weten en we verbeteren de handleiding graag.