Tutoriel Svelte — Lily Design System

Ce que vous allez construire

Un petit formulaire de contact — champ avec étiquette, bouton d'envoi, liaison bidirectionnelle, vrai comportement clavier et lecteur d'écran — d'abord nu, puis stylé, en 10 minutes environ.

Avant de commencer

Il vous faut git, Node 22 ou plus récent et pnpm 10 ou plus récent. Tout projet Svelte 5 convient — une toute nouvelle npx sv create application suffit.

Étape 1 — Récupérer le code

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

Les composants se trouvent dans src/lib/components/{Name}/, un répertoire par composant avec le fichier .svelte , ses tests, ses stories et sa documentation côte à côte. Copiez les répertoires dont vous avez besoin dans votre application, ou dépendez du dépôt et importez directement.

Étape 2 — Votre premier composant

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

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

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

Rend <button class="button" type="button">. Les props sont typées : type, disabled, pressed (rend aria-pressed (rend label (un aria-label pour les boutons à bascule),

Étape 3 — Composer un petit formulaire

<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 prend le label comme sa propre prop plutôt qu'un composant d'étiquette imbriqué — transmettez-la une fois, sur Fieldet TextInputcorrespondant de label fournit le nom accessible. TextInput's value pour remplacer), et tout attribut supplémentaire est répandu sur la racine. $bindable est une prop bind:value rune, donc

Vérifié le 2026-08-29 : vous donne tout de suite une liaison bidirectionnelle. svelte/server cet extrait exact a été compilé via <label for> et vérifié pour une seule étiquette, correctement liée Label à l'intérieur de Field— un brouillon précédent imbriquait un deux étiquettes (une vide) parce que Field rend déjà la sienne à partir de l'entrée label distinct à l'intérieur, ce qui rendait La route composée du formulaire de contact suit le même motif, éprouvé par de vrais tests e2e et axe.

Vérifiez votre travail : lancez l'application et le formulaire paraît nu — exactement comme prévu : le style reste à venir. Appuyez sur Tab: le focus traverse chaque contrôle, l'étiquette est annoncée et l'envoi fonctionne. Le comportement est fait ; l'apparence est la vôtre et c'est l'étape suivante.

Étape 4 — Le styler

Tout ce qui précède est rendu comme de la structure pure, prête pour vos styles. Stylez les crochets de classe — .button, .text-input, .label, .field — dans votre feuille de style globale, ou liez un thème prêt à l'emploi dans app.html:

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

Les ajustements par instance passent par la class prop, qui s'ajoute au crochet de base : <Button class="wide"> rend class="button wide".

Étape 5 — Voir le tout fonctionner

L'application d'exemple SvelteKit est le même catalogue entièrement stylé, avec des démos en direct, des tests Playwright e2e et une référence d'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

Étapes suivantes

Thèmes — changement à l'exécution avec l'assistant theme-picker de Svelte.
Assistants de préférences — langue et taille du texte.
Catalogue de composants — propriétés, ARIA et clavier par composant.

Des questions en chemin ? La page d'aide regorge de réponses — et si une étape peut être plus claire, dites-le-nous et nous améliorerons volontiers le tutoriel.