Lily Design System™

Tutorial React

Komponen fungsi kanthi tipe, siji berkas saben siji, dikontrol nganggo pola standar value + onChange — kabèh mlaku kaya sing wis dilakoni React.

Apa sing bakal sampeyan gawé

Formulir kontak cilik — kolom nganggo label, tombol kirim, kahanan sing dikontrol, 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 React 18+ apa wae bisa — Next.js, Vite utawa React biasa.

Langkah 1 — Njupuk kode

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install
pnpm test        # vitest + @testing-library/react
pnpm run storybook   # browse all 571 components

Komponen iku berkas rata ing components/ — Button.tsx, TextInput.tsx — saben siji kanthi tes, story lan dokumentasiné ing jejeré. Salin berkas sing dibutuhaké menyang aplikasi sampeyan, utawa tarik repositori lan impor saka kono.

Langkah 2 — Komponen pisanan sampeyan

import Button from "lily-design-system-react-headless/components/Button";

export function SaveBar() {
  return <Button onClick={save}>Save</Button>;
}

Nampilaké <button class="button" type="button">. Props: type, disabled, pressed (nampilaké aria-pressed), label ( aria-label kanggo nimpa), className, lan atribut tambahan apa wae nyebar ing unsur oyod.

Langkah 3 — Nyusun formulir cilik

import { useState } from "react";
import Form from ".../components/Form";
import Field from ".../components/Field";
import TextInput from ".../components/TextInput";
import Button from ".../components/Button";

export function ContactForm() {
  const [name, setName] = useState("");
  return (
    <Form label="Contact form" onSubmit={handleSubmit}>
      <Field label="Full name" required>
        <TextInput id="name" label="Full name" value={name} onChange={setName} 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.

Dikonfirmasi 2026-08-29: konsep sadurungé nyarangaké komponen Label ing njero Field, sing nampilaké rong label (siji kosong) amarga Field wis nampilaké dhéwé saka input label prop — ditemokaké kanthi ngompilasi potongan sing persis. Rute Rute formulir kontak gabungan iku pola sing padha, diuji nganggo tes e2e lan axe nyata.

Langkah 4 — Tata

Kabèh ing ndhuwur dirender minangka struktur murni, siap kanggo gaya sampeyan. Tata pancingan — .button, .text-input, .label, .field — ing lembar gaya sampeyan, tumpukna utilitas Tailwind liwat className, utawa sambungna tema sing wis siap: 

<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />

Langkah 5 — Deleng kabèh mlaku

Aplikasi conto Next.js iku katalog lengkap sing ditata lan didemonstrasiaké, kanthi Playwright e2e lan garis dhasar axe-core: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-next-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.