Lily Design System™

Tutorial Svelte

La libreria Svelte di Lily è l'implementazione canonica: rune di Svelte 5, prop tipizzate, propagazione delle prop restanti e binding bidirezionale con bind:value.

Cosa costruirai

Un piccolo modulo di contatto — campo con etichetta, pulsante di invio, binding bidirezionale, comportamento reale di tastiera e screen reader — prima spoglio, poi stilizzato, in circa 10 minuti.

Prima di iniziare

Servono git, Node 22 o successivo e pnpm 10 o successivo. Va bene qualsiasi progetto Svelte 5 — una nuova npx sv create app va benissimo.

Passo 1 — Ottieni il codice

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

I componenti si trovano in src/lib/components/{Name}/, una directory per componente con il file .svelte i suoi test, le sue story e la sua documentazione affiancati. Copia le directory che ti servono nella tua app, oppure dipendi dal repository e importa direttamente.

Passo 2 — Il tuo primo componente

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

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

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

Rende <button class="button" type="button">. Le prop sono tipizzate: type, disabled, pressed (rende aria-pressed (rende label (un aria-label per i pulsanti a commutazione),

Passo 3 — Componi un piccolo modulo

<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 riceve l' label come prop propria invece di un componente etichetta annidato — passala una sola volta, su Fielde TextInputcorrispondente label fornisce il nome accessibile. TextInput's value per sostituire), e qualsiasi attributo in più si propaga sulla radice. $bindable è una prop bind:value rune, quindi

Verificato il 2026-08-29: ti dà subito il binding bidirezionale. svelte/server questo snippet esatto è stato compilato tramite <label for> e controllato per avere una sola etichetta, collegata correttamente Label dentro Field— una bozza precedente annidava un due etichette (una vuota) perché Field rende già la propria dall'input label separato dentro, che rendeva La rotta composta del modulo di contatto è lo stesso schema, collaudato da veri test e2e e axe.

Controlla il lavoro: avvia l'app e il modulo appare spoglio — esattamente come previsto: lo stile deve ancora venire. Premi Tab: il focus si sposta su ogni controllo, l'etichetta viene annunciata e l'invio funziona. Il comportamento è fatto; l'aspetto è tuo, ed è il prossimo passo.

Passo 4 — Dagli uno stile

Tutto quanto sopra viene reso come pura struttura, pronta per i tuoi stili. Stilizza gli hook di classe — .button, .text-input, .label, .field — nel tuo foglio di stile globale, oppure collega un tema pronto in app.html: 

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

Le modifiche per singola istanza passano per la class prop, che si aggiunge all'hook di base: <Button class="wide"> rende class="button wide".

Passo 5 — Guarda tutto in funzione

App di esempio SvelteKit è lo stesso catalogo completamente stilizzato, con demo dal vivo, test e2e Playwright e una baseline di accessibilità axe-core: 

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

Prossimi passi

Domande lungo la strada? La pagina di aiuto è piena di risposte — e se un passo può essere più chiaro, faccelo sapere e miglioreremo volentieri il tutorial.