Lily Design System™

Svelte-vejledning

Lilys Svelte-bibliotek er den kanoniske implementering: Svelte 5-runes, typede props, spredning af resterende props og tovejsbinding med bind:value.

Det her bygger du

En lille kontaktformular — felt med etiket, send-knap, tovejsbinding, ægte tastatur- og skærmlæseradfærd — først nøgen, derefter formgivet, på omkring 10 minutter.

Før du går i gang

Du skal bruge git, Node 22 eller nyere og pnpm 10 eller nyere. Ethvert Svelte 5-projekt virker — en splinterny npx sv create -app er nok.

Trin 1 — Hent koden

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

Komponenterne ligger i src/lib/components/{Name}/, én mappe pr. komponent med .svelte -filen, dens tests, dens stories og dens dokumentation side om side. Kopiér de mapper, du har brug for, ind i din app, eller afhæng af repoet og importér direkte.

Trin 2 — Din første komponent

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

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

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

Gengiver <button class="button" type="button">. Propsene er typede: type, disabled, pressed (gengiver aria-pressed (gengiver label (et aria-label til skifteknapper),

Trin 3 — Sæt en lille formular sammen

<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 tager den synlige label som sin egen prop i stedet for en indlejret etiketkomponent — send den én gang, på Fieldog TextInputfra label giver det tilgængelige navn. TextInput's value til at tilsidesætte), og enhver ekstra attribut spredes på roden. $bindable er en bind:value -rune-prop, så

Verificeret 2026-08-29: giver dig tovejsbinding med det samme. svelte/server dette præcise kodeeksempel blev kompileret via <label for> og tjekket for én enkelt, korrekt forbundet etiket Label inde i Field— et tidligere udkast indlejrede en separat to etiketter (en tom), fordi Field allerede gengiver sin egen fra label inde i, hvilket gengav Den sammensatte kontaktformularrute er det samme mønster, afprøvet med ægte e2e- og axe-tests.

Tjek dit arbejde: kør appen, og formularen ser nøgen ud — præcis som tilsigtet: formgivningen kommer endnu. Tryk på Tab: fokus flytter sig gennem hver kontrol, etiketten oplæses, og afsendelse virker. Adfærden er færdig; udseendet er dit og er næste skridt.

Trin 4 — Giv den stil

Alt ovenfor gengives som ren struktur, klar til dine stilarter. Formgiv klassekrogene — .button, .text-input, .label, .field — i dit globale typografiark, eller link et færdigt tema i app.html: 

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

Justeringer pr. instans går via class -propen, som tilføjes til basekrogen: <Button class="wide"> gengiver class="button wide".

Trin 5 — Se det hele virke

SvelteKit eksempelapp er det samme katalog fuldt formgivet, med levende demoer, Playwright e2e-tests og en axe-core-tilgængelighedsbaseline: 

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

Næste skridt

Spørgsmål undervejs? Siden Hjælp er fuld af svar — og hvis et trin kan blive tydeligere, så fortæl os det og vi forbedrer gerne vejledningen.