Руководство по 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 — Оформите её

Всё вышеперечисленное отображается как чистая структура, готовая для ваших стилей. Оформите крючки — .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

Дальнейшие шаги

Темы — переключение во время выполнения с помощником theme-picker для React.
Помощники настроек — язык и размер текста.
Каталог компонентов — свойства, ARIA и клавиатура для каждого компонента.

Есть вопросы по ходу дела? Страница справки полна ответов — а если какой-то шаг можно сделать яснее, сообщите нам и мы с радостью улучшим руководство.