Lily Design System™

Svelte チュートリアル

Lily の Svelte ライブラリが基準の実装です: Svelte 5 のルーン、型付きプロパティ、残りのプロパティの展開、そして次による双方向バインディング: bind:value.

作るもの

小さなお問い合わせフォーム — ラベル付き入力、送信ボタン、双方向バインディング、本物のキーボードとスクリーンリーダーの動作 — まずは装飾なしで、次にスタイルを付けて、約 10 分で作ります。

始める前に

git、Node 22 以降、pnpm 10 以降が必要です。Svelte 5 のプロジェクトならどれでも使えます — 新規の npx sv create アプリで構いません。

ステップ 1 — コードを入手する

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

コンポーネントは次の場所にあります: src/lib/components/{Name}/、コンポーネントごとに 1 つのディレクトリがあり、その中に .svelte ファイル、テスト、ストーリー、ドキュメントが並んでいます。必要なディレクトリをアプリにコピーするか、リポジトリに依存して直接インポートします。

ステップ 2 — 最初のコンポーネント

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

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

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

描画する要素: <button class="button" type="button">。プロパティには型が付いています: type, disabled, pressed (描画する要素: aria-pressed (トグルボタンでは label ( aria-label の上書き用)、追加の属性はルートに展開されます。

ステップ 3 — 小さなフォームを組み立てる

<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 は、表示用の label を、ネストしたラベルコンポーネントではなく専用のプロパティとして受け取ります — 一度だけ渡せば、 Field、そして TextInputの対応する label がアクセシブルな名前を与えます。 TextInput's value は $bindable ルーンのプロパティなので、 bind:value を使えばすぐに双方向バインディングが得られます。

2026-08-29 に確認済み: このスニペットそのものを、次を通してコンパイルして svelte/server 正しくひも付いたラベルが 1 つだけであることを確認しました <label for> — 以前の下書きでは別の Label の中の Fieldをネストしていたため、描画された結果は 2 つの ラベル(1 つは空)が描画されていました。 Field は label プロパティ。 お問い合わせフォームの組み合わせルート も同じパターンで、本物の e2e テストと axe テストで検証されています。

動作の確認: アプリを実行すると、フォームは飾りのない見た目になります — 意図どおりで、スタイルはこれからです。 Tabキーを押してみましょう。フォーカスがすべてのコントロールを移動し、ラベルが読み上げられ、送信も動きます。動作は完成しています。見た目はあなた次第で、次のステップです。

ステップ 4 — スタイルを付ける

上のコードはすべて純粋な構造として描画され、スタイルを待っています。クラスフックにスタイルを付けます — .button, .text-input, .label, .field — グローバルのスタイルシートで、または既成のテーマを次でリンクします: app.html: 

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

インスタンスごとの調整は次を通します: class プロパティで、基本のフックに追加されます: <Button class="wide"> 描画結果: class="button wide".

ステップ 5 — 動いているところを見る

SvelteKit サンプルアプリ は、同じカタログをスタイル付きで表示したもので、ライブデモ、Playwright e2e テスト、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

次のステップ

途中で疑問があれば、 ヘルプページ に答えがたくさんあります。もし手順がもっと分かりやすくできるなら、 お知らせください 。喜んでチュートリアルを改善します。