Форма входа в React с Chakra UI

Открытый ноутбук с редактором кода на экране

Визуальное оформление приложений через набор собственных CSS‑правил удобно, пока проект небольшой. С ростом функциональности поддерживать консистентность стилей становится сложнее. Chakra UI — библиотека компонентов и утилитных пропсов, которая ускоряет разработку UI и упрощает поддержку единого визуального языка в приложении.

Что вы получите

Быстрый старт с Chakra UI в React.
Провайдер темы для доступа к компонентам Chakra по всему приложению.
Переключатель светлой/тёмной темы.
Компонент формы входа с управлением состояния, обработкой ошибок и индикатором загрузки.
Подсказки по тестированию, альтернативы и чеклисты для команд.

1. Установка и подготовка проекта

Создайте базовый React‑проект через create‑react‑app или Vite. Затем установите зависимости:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

(В проекте репозиторий с примером кода может быть на GitHub — используйте его как референс.)

2. Добавляем ChakraProvider

Оберните приложение в ChakraProvider, чтобы все компоненты и темы были доступны в дереве React. Это удобно делать в index.jsx, main.jsx или App.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { ChakraProvider } from '@chakra-ui/react'

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
      
    
  ,
)

Важно: без ChakraProvider компоненты Chakra не будут иметь тему и стили по умолчанию.

3. Переключатель темы (тёмная / светлая)

Chakra поддерживает светлый, тёмный и системный режимы из коробки. Для переключения создадим компонент ThemeToggler.

Создайте файл src/components/ThemeToggler.jsx с таким кодом:

import React from 'react'
import { useColorMode, Box, IconButton } from '@chakra-ui/react'
import { SunIcon, MoonIcon } from '@chakra-ui/icons'

export default function ThemeToggler() {
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    
       : }
        onClick={toggleColorMode}
        variant="ghost"
        aria-label="Toggle theme"
      />
      Toggle Theme
    
  )
}

Установите пакет иконок, если ещё не сделали:

npm i @chakra-ui/icons

IconButton сочетает в себе поведение кнопки и визуализацию иконки. Хук useColorMode даёт текущее состояние темы и функцию toggleColorMode.

4. Создаём UI формы входа

Добавим компонент Login в src/components/Login.jsx. Сначала — нужные импорты:

import React, { useState } from 'react'
import {
  Box,
  Button,
  Card,
  CardBody,
  Center,
  Flex,
  FormControl,
  FormLabel,
  Heading,
  HStack,
  Input,
  Stack,
  VStack,
  useColorMode,
  Alert,
  AlertIcon,
  AlertTitle,
  CircularProgress
} from '@chakra-ui/react'

Далее базовая структура компонента:

function Login() {
  const { colorMode } = useColorMode()

  return (
    
      
        
          
          
        
      
    
  )
}

export default Login

Box — это базовый контейнер (рендерит div). Flex — Box со свойством display: flex. Center центрирует вложенные элементы. Stack и VStack упрощают вертикальную и горизонтальную компоновку с отступами.

Заголовок формы

Внутри Stack добавим VStack с заголовком:


  
    Login

Карточка с формой

Добавим Card, внутри которой разместим элементы формы:


  
    
      
        
          Email Address

           { setEmail(e.target.value) }}
          />
        

        
          
            Password

            
          

           { setPassword(e.target.value) }}
          />

Обратите внимание: в примере использованы value и onChange для управления состояниями email и password.

5. Подключаем компонент в App

В App.jsx импортируйте компоненты и отобразите их:

import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'

export default function App() {
  return (
    
      
      
    
  )
}

Запустите dev‑сервер:

npm run dev

После загрузки страницы по умолчанию будет светлая тема.

Форма входа и кнопка переключения темы на странице браузера.

Нажмите кнопку Toggle Theme, чтобы переключить режим.

Форма входа и кнопка переключения темы на странице браузера.

6. Управление состоянием формы (React Hooks)

Добавим состояния внутри компонента Login:

const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [success, setSuccess] = useState('')
const [error, setError] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [isLoggedIn, setIsLoggedIn] = useState(false)

onChange для полей уже установлен выше, чтобы обновлять email и password.

7. Обработка отправки формы и валидация

Добавьте в тег form обработчик onSubmit:

Определите функцию handleSubmit:

const handleSubmit = async event => {
  event.preventDefault()
  setIsLoading(true)

  try {
    await userLogin({ email, password })
    setSuccess('Logged in successfully!')
    setIsLoading(false)
    setIsLoggedIn(true)
  } catch (error) {
    setError('Invalid username or password!')
    setIsLoading(false)
    setEmail('')
    setPassword('')
  }
}

Функция имитирует сетевой запрос и переключает состояния загрузки и успеха/ошибки. Вы можете показать визуальный спиннер, пока идет обработка.

Симуляция API‑запроса

Добавим простую имитацию API userLogin:

const userLogin = async ({ email, password }) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === 'test@email.com' && password === 'password') {
        resolve()
      } else {
        reject()
      }
    }, 1000)
  })
}

Это упрощённая логика для демонстрационных целей. В реальном приложении вы будете вызывать реальный endpoint и обрабатывать ошибки сервера.

8. Отображение ошибок и успеха с помощью компонентов Chakra

Импортируйте Alert, AlertIcon, AlertTitle и используйте их под тегом form:

{error && !isLoggedIn && (
  
    
    {error}
  
)}

{isLoggedIn && (
  
    
    {success}
  
)}

Примеры состояний:

Форма входа с сообщением об успешной авторизации.

Форма входа с сообщением об ошибке входа.

9. Практические рекомендации по улучшению разработки

Разделяйте логику и презентацию: выделяйте хук useLogin или сервис для API‑запросов.
Валидацию выполняйте на клиенте (формат email, минимальная длина пароля) и на сервере (авторизация, блокировки).
Используйте Toast для коротких уведомлений, а Alert — для важных сообщений, видимых постоянно.
Покрывайте компонент тестами интеграции (см. раздел Тест-кейсы).

Когда этот подход не подойдёт

Если вам нужна полностью кастомная система дизайна с уникальными CSS‑правилами, Chakra может наложить ограничения.
Для очень лёгких сайтов, где нужен один‑два простых стиля, подключать целую библиотеку UI может быть избыточно.
В проектах с жёсткими требованиями к производительности на первых миллисекундах загрузки без SSR и tree‑shaking стоит учитывать размер бандла.

Альтернативные библиотеки

Material UI — богатая библиотека компонентов с собственным дизайном.
Ant Design — корпоративная библиотека с большим набором компонентов.
Tailwind CSS — утилитарный CSS‑фреймворк без готовых React‑компонентов; требует собственной компонентной обвязки.

Выбор зависит от команды: нужно ли вам готовые компоненты, строгая система дизайна или гибкость утилит.

Ментальные модели и эвристики

«Компонент ≈ контракт»: каждый UI‑компонент должен иметь понятный набор пропов и минимальную внутреннюю логику.
«UI как система»: думайте о кольцах переиспользования — атомы (Input, Button), молекулы (FormRow), организмы (Card с формой).
Отделяйте состояние (hooks, context) от визуальной разметки (Chakra-компоненты).

Роль‑ориентированные чеклисты

Разработчик
- Реализовать компонент с понятными пропами.
- Покрыть тестами критические пути (успех, ошибка, валидация).
- Обработать состояние загрузки и блокировку кнопки.
Дизайнер
- Утвердить вариации фокуса, ошибок и состояния disabled.
- Согласовать цвета для светлой/тёмной тем.
Тестировщик
- Проверить сценарии: правильные и неправильные данные, повторные отправки, поведение при медленном соединении.

Тест‑кейсы / Критерии приёмки

Ввод корректного email и пароля приводит к состоянию успеха.
Ввод некорректных данных показывает ошибку и очищает поля.
Кнопка отправки показывает индикатор загрузки до завершения запроса.
Переключатель темы меняет внешний вид приложения между светлой и тёмной темами.
Поля формы проверяются на пустые значения до отправки.

Шаблон проверки перед слиянием (SOP)

Локально: npm run dev — интерфейс без ошибок.
ESLint/Prettier пройдены.
Unit/Integration тесты зелёные.
Компонент документирован: пропы и ожидаемое поведение описаны.

Короткий сниппет‑чеклист (cheat sheet)

ChakraProvider — корневой провайдер.
useColorMode — текущая тема и toggle.
IconButton — кнопка с иконкой.
Stack/VStack/HStack — простые контейнеры для отступов.
Alert/CircularProgress — статусные компоненты.

Краткий глоссарий

ChakraProvider — корневой компонент для доступа к теме Chakra.
useColorMode — хук управления светлой/тёмной темой.
Stack — компонент для вертикальной компоновки элементов.
Card/CardBody — структурированные контейнеры для карточек.

Итог

Chakra UI ускоряет создание красивых и доступных интерфейсов в React. Библиотека даёт готовые компоненты, контроль тем и простые утилиты. Для формы входа вы получили рабочую структуру: провайдер темы, переключатель режима, форму с управлением состояния, обработкой ошибок и индикатором загрузки. Дальше можно вынести логику в хуки, добавить валидацию и интеграцию с реальным API.

Important: адаптируйте стили и валидацию под требования безопасности и UX вашей команды.

Как создать форму входа в React с Chakra UI