Lily Design System™

บทเรียน React

คอมโพเนนต์ฟังก์ชันที่มีชนิดข้อมูล หนึ่งไฟล์ต่อหนึ่งตัว ควบคุมด้วยรูปแบบมาตรฐาน value + onChange — ทุกอย่างทำงานแบบที่ React ทำอยู่แล้ว

สิ่งที่คุณจะสร้าง

ฟอร์มติดต่อขนาดเล็ก — ช่องกรอกที่มีป้ายกำกับ, ปุ่มส่ง, สถานะแบบควบคุม, พฤติกรรมของแป้นพิมพ์และโปรแกรมอ่านหน้าจอจริง — เริ่มจากแบบไม่ตกแต่งก่อน แล้วค่อยใส่สไตล์ ภายในประมาณ 10 นาที

ก่อนเริ่ม

คุณต้องมี git, Node 22 ขึ้นไป และ pnpm 10 ขึ้นไป โปรเจกต์ React 18+ ใดก็ได้ — Next.js, Vite หรือ React ล้วน ๆ

ขั้นที่ 1 — รับโค้ด

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

คอมโพเนนต์เป็นไฟล์แบบแบนอยู่ใน components/ — Button.tsx, TextInput.tsx — แต่ละตัวมีการทดสอบ story และเอกสารอยู่ข้างกัน คัดลอกไฟล์ที่ต้องการเข้าแอปของคุณ หรือนำรีโพเข้ามาแล้วนำเข้าจากที่นั่น

ขั้นที่ 2 — คอมโพเนนต์แรกของคุณ

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

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

แสดงผล <button class="button" type="button">Props: type, disabled, pressed (แสดงผล aria-pressed), label ( aria-label ใช้แทนที่), classNameและแอตทริบิวต์เพิ่มเติมใด ๆ จะกระจายไปที่องค์ประกอบราก

ขั้นที่ 3 — ประกอบฟอร์มเล็ก ๆ

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 รับ label เป็น prop ของตัวเอง แทนที่จะเป็นคอมโพเนนต์ป้ายกำกับที่ซ้อนอยู่ข้างใน — ส่งเพียงครั้งเดียวที่ Fieldและ TextInputที่ตรงกัน label ให้ชื่อที่เข้าถึงได้

ตรวจสอบเมื่อ 2026-08-29: ร่างก่อนหน้านี้ซ้อนคอมโพเนนต์ Label ภายใน Fieldซึ่งแสดงผล ป้ายกำกับ สองอัน (อันหนึ่งว่างเปล่า) เพราะ Field แสดงป้ายกำกับของตัวเองอยู่แล้วจาก label prop — พบจากการคอมไพล์ตัวอย่างโค้ดจริง เส้นทางฟอร์มติดต่อแบบประกอบ เป็นรูปแบบเดียวกัน และผ่านการทดสอบ e2e และ axe จริง

ขั้นที่ 4 — ใส่สไตล์

ทุกอย่างข้างบนเรนเดอร์เป็นโครงสร้างล้วน พร้อมรับสไตล์ของคุณ ใส่สไตล์ให้ hook — .button, .text-input, .label, .field — ในสไตล์ชีตของคุณ ซ้อนยูทิลิตี Tailwind ผ่าน classNameหรือลิงก์ธีมสำเร็จรูป: 

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

ขั้นที่ 5 — ดูทุกอย่างทำงาน

แอปตัวอย่าง Next.js คือแคตตาล็อกทั้งหมดที่มีสไตล์และเดโม พร้อม Playwright e2e และเส้นฐาน 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

ขั้นต่อไป

มีคำถามระหว่างทางไหม? หน้าช่วยเหลือ เต็มไปด้วยคำตอบ — และถ้าขั้นตอนไหนทำให้ชัดเจนกว่านี้ได้ บอกเรา แล้วเรายินดีปรับปรุงบทเรียน