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 已验证：早期草稿在 Field 里嵌套了单独个 Label，结果渲染出两个标签（其中一个为空），因为 Field 已经会根据 label prop 渲染自己个标签——这是通过编译这段代码发现个。
联系表单组合路由
采用同样个模式，并经过真实个端到端测试搭 axe 测试。
第 4 步——添加样式
以上所有内容渲染出来侪是纯结构，随时可以套用侬个样式。在侬个样式表中为搿眼钩子设置样式——.button、
.text-input、.label、.field——或者通过 className 叠加 Tailwind 工具类，或者链接一个现成个主题：
<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />第 5 步——看看伊个完整效果
Next.js 示例应用是完整目录个带样式演示版本，带有 Playwright 端到端测试搭 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