Tutorial de Svelte — Lily Design System

O que vai construir

Um pequeno formulário de contacto — campo com etiqueta, botão de envio, ligação bidirecional, comportamento real de teclado e leitor de ecrã — primeiro simples, depois estilizado, em cerca de 10 minutos.

Antes de começar

Precisa de git, Node 22 ou posterior e pnpm 10 ou posterior. Qualquer projeto Svelte 5 serve — uma aplicação novinha npx sv create chega.

Passo 1 — Obter o código

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

Os componentes vivem em src/lib/components/{Name}/, um diretório por componente com o ficheiro .svelte , os seus testes, as suas stories e a sua documentação lado a lado. Copie os diretórios de que precisa para a sua aplicação, ou dependa do repositório e importe diretamente.

Passo 2 — O seu primeiro componente

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

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

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

Renderiza <button class="button" type="button">. As props são tipadas: type, disabled, pressed (renderiza aria-pressed (renderiza label (um aria-label para botões de alternância),

Passo 3 — Componha um pequeno formulário

<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 recebe o label como a sua própria prop em vez de um componente de etiqueta aninhado — passe-a uma vez, em Fielde TextInputcorrespondente de label fornece o nome acessível. TextInput's value para substituir), e qualquer atributo adicional é espalhado na raiz. $bindable é uma prop bind:value rune, pelo que

Verificado em 2026-08-29: lhe dá ligação bidirecional de imediato. svelte/server este excerto exato foi compilado através de <label for> e verificado quanto a uma única etiqueta corretamente ligada Label dentro de Field— um rascunho anterior aninhava um duas etiquetas (uma vazia) porque Field já renderiza a sua própria a partir da entrada label separado lá dentro, o que renderizava A rota composta do formulário de contacto é o mesmo padrão, exercitado com testes e2e e axe reais.

Verifique o seu trabalho: execute a aplicação e o formulário parece simples — exatamente como pretendido: o estilo ainda está por vir. Prima Tab: o foco percorre cada controlo, a etiqueta é anunciada e o envio funciona. O comportamento está feito; o aspeto é seu e é o passo seguinte.

Passo 4 — Estilize-o

Tudo o que está acima é renderizado como estrutura pura, pronta para os seus estilos. Estilize os ganchos de classe — .button, .text-input, .label, .field — na sua folha de estilos global, ou ligue um tema pronto em app.html:

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

Os ajustes por instância passam pela class prop, que é acrescentada ao gancho base: <Button class="wide"> renderiza class="button wide".

Passo 5 — Veja tudo a funcionar

A aplicação de exemplo SvelteKit é o mesmo catálogo totalmente estilizado, com demonstrações em direto, testes Playwright e2e e uma linha de base de acessibilidade 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

Passos seguintes

Temas — alternância em tempo de execução com o auxiliar theme-picker do Svelte.
Auxiliares de preferências — idioma e tamanho do texto.
Catálogo de componentes — propriedades, ARIA e teclado por componente.

Dúvidas pelo caminho? A página de ajuda está cheia de respostas — e se algum passo puder ser mais claro, diga-nos e melhoraremos o tutorial com todo o gosto.