Lily Design System™

Tutorial Svelte

Pustaka Svelte Lily iku implementasi kanonik: runes Svelte 5, props kanthi tipe, panyebaran props sisa, lan pengikatan loro arah karo bind:value.

Apa sing bakal sampeyan gawé

Formulir kontak cilik — kolom nganggo label, tombol kirim, pengikatan loro arah, prilaku keyboard lan pamaca layar sing nyata — dhisik polosan, banjur ditata, kira-kira 10 menit.

Sadurunge miwiti

Sampeyan butuh git, Node 22 utawa luwih anyar, lan pnpm 10 utawa luwih anyar. Proyek Svelte 5 apa wae bisa — aplikasi anyar npx sv create wis cukup.

Langkah 1 — Njupuk kode

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

Komponen manggon ing src/lib/components/{Name}/, siji direktori saben komponen kanthi berkas .svelte , tesé, story-né lan dokumentasiné bebarengan. Salin direktori sing dibutuhaké menyang aplikasi sampeyan, utawa gumantung ing repositori lan impor langsung.

Langkah 2 — Komponen pisanan sampeyan

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

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

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

Nampilaké <button class="button" type="button">. Props kanthi tipe: type, disabled, pressed (nampilaké aria-pressed (nampilaké label ( aria-label kanggo tombol toggle),

Langkah 3 — Nyusun formulir cilik

<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 nampa label minangka prop dhéwé, dudu komponen label sing disarangaké — lulusna sepisan, ing Fieldlan TextInputsing cocog saka label nyedhiyakaké jeneng sing bisa diakses. TextInput's value kanggo nimpa), lan atribut tambahan apa wae nyebar ing oyod. $bindable iku prop bind:value rune, mula

Dikonfirmasi 2026-08-29: langsung menehi pengikatan loro arah. svelte/server potongan persis iki dikompilasi liwat <label for> lan dipriksa kanggo siji label sing disambungaké kanthi bener Label ing njero Field— konsep sadurungé nyarangaké rong label (siji kosong) amarga Field wis nampilaké dhéwé saka input label kapisah ing njero, sing nampilaké Rute formulir kontak gabungan iku pola sing padha, diuji nganggo tes e2e lan axe nyata.

Priksa pagawéan sampeyan: jalanna aplikasi lan formulir katon polosan — persis kaya sing dikarepaké: penataan isih ing ngarep. Pencet Tab: fokus mlaku liwat saben kontrol, label diumumaké lan kirim mlaku. Prilaku wis rampung; tampilan iku duwèkmu lan dadi langkah sabanjuré.

Langkah 4 — Tata

Kabèh ing ndhuwur dirender minangka struktur murni, siap kanggo gaya sampeyan. Tata pancingan kelas — .button, .text-input, .label, .field — ing lembar gaya global sampeyan, utawa sambungna tema sing wis siap ing app.html: 

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

Panyetelan saben instans liwat class prop, sing ditambahaké menyang pancingan dhasar: <Button class="wide"> nampilaké class="button wide".

Langkah 5 — Deleng kabèh mlaku

Aplikasi conto SvelteKit iku katalog sing padha sing wis ditata lengkap, kanthi demo langsung, tes Playwright e2e lan garis dhasar aksesibilitas 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

Langkah sabanjuré

Ana pitakon ing dalan? Kaca pitulung kebak wangsulan — lan menawa ana langkah sing bisa luwih cetha, kandhanana kita lan kita bakal seneng nyaosi tutorial luwih apik.