Chakra UI — форма входа в React

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

Стилизация приложений через кастомный CSS весёлая задача, пока проект небольшой. С ростом кода поддерживать единый дизайн становится сложно.

Можно продолжать использовать «сырую» CSS, но чаще эффективнее применять библиотеку UI-компонентов, например Chakra UI. Она даёт быстрый и предсказуемый способ оформления приложения через предопределённые компоненты и utility-пропсы.

Быстрый старт с Chakra UI в React

Создайте базовое приложение React (create-react-app или Vite). Затем установите зависимости:

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

Код примера доступен в репозитории проекта (ссылка в исходном источнике).

Добавьте провайдер темы Chakra

После установки оберните приложение в ChakraProvider. Это можно сделать в 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 UI.

Переключение тем (светлая / тёмная)

Chakra UI поставляется с предустановленной темой и поддержкой light/dark/system режимов. Тему можно расширять через объект theme (см. документацию).

Для переключения режима создайте файл 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"  
          />  
          Toggle Theme  
          
    );  
}

Импорт пакета иконок:

npm i @chakra-ui/icons

Компонент ThemeToggler отрисует кнопку, позволяющую переключать тёмную и светлую тему. Хук useColorMode предоставляет текущее состояние цветовой схемы и функцию toggleColorMode.

Создание UI формы входа

Добавьте файл components/Login.jsx с компонентом формы. Сначала импорты:

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

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

function Login() {  
    const { colorMode } = useColorMode();  
  
    return (  
          
              
                  
                      
                      
                  
              
          
    );  
}  
  
export default Login;

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

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

Внутри Stack поместим вертикальную стековую обёртку и заголовок:

  
      
        Вход

Карточка с полями

Создаём Card, который будет содержать форму:

  
    
      
        
          
          Email Address  
  
            
          
  
          
            
            Password

Обратите внимание: в примере тексты меток и кнопок можно локализовать (например, “Sign in” → “Войти”). При переводе строк внутри JSX сохраняйте синтаксис.

Затем импортируйте компоненты в 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

По умолчанию откроется светлая тема.

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

Нажмите иконку переключения темы, чтобы переключиться на тёмный режим.

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

Управление состоянием формы через React-хуки

На текущем этапе форма содержит поля email и password и кнопку “Sign in”. Добавим состояние и логику с помощью хуков:

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 для полей:

onChange={(e)=> { setEmail(e.target.value)}}  
onChange={(e)=> { setPassword(e.target.value)}}

Теперь ввод пользователя сохраняется в состоянии.

Валидация и обработка ошибок с Chakra UI

Добавим обработчик отправки формы: на тег 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('');  
    }  
};

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

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

Пример функции, имитирующей проверку логина:

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

Встроенные компоненты для ошибок и прогресса

Chakra предоставляет Alert, AlertIcon, AlertTitle и CircularProgress для визуальной обратной связи. Под формой добавьте рендеринг статусов:

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

И сделаем кнопку отображающей спиннер при загрузке:

{isLoading  
  ? ()  
  : ('Sign In')}

Пример успешного состояния:

Форма входа со статусом успеха, показывающая успешный вход

Пример состояния с ошибкой:

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

Когда Chakra UI может не подойти

Important: Chakra отлично подходит для быстрых внутренних интерфейсов и MVP. Однако бывают случаи, когда стоит рассмотреть другие варианты:

Строгий дизайн‑гайд с нестандартными визуальными компонентами может потребовать большой кастомизации. В этом случае часто более подходящим будет собственная библиотека компонентов или дизайн‑система на базе стилизованных компонентов.
Требования по производительности на старте: если проект максимально оптимизирован и минимальный бандл критичен, добавление библиотеки компонентов увеличит размер сборки.
Политики безопасности/статической типизации: если нужен строгий набор UI-компонентов с TypeScript типами на высшем уровне, сравнивайте поддержку типов у альтернатив.

Альтернативные подходы

Material UI — богатая библиотека компонентов с готовыми темами и плотной экосистемой.
Tailwind CSS — утилитарно‑ориентированная CSS‑библиотека; требует сборки собственных компонентов, зато минимальна по зависимости от рантайма.
Styled System / Theme UI — если нужна гибкость темы и лёгкая интеграция с собственными примитивами.

Выбор зависит от приоритетов: скорость разработки (Chakra), полный контроль над CSS (Tailwind) или богатый набор готовых виджетов (MUI).

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

Single Source of Truth: держите цвета и отступы в единой теме, тогда смена дизайна займёт минимально времени.
Компоненты vs утилиты: если интерфейсов мало — используйте готовые компоненты; если много уникальных экранов — утилитарный подход даёт большую гибкость.
Оптимизация бандла: анализируйте импорт — используйте поддерево импорта и lazy loading для тяжёлых частей.

Контрольные списки по ролям

Разработчик:

Подключил ChakraProvider и theme.
Локализовал пользовательские строки.
Обработал состояние загрузки и ошибки.
Проверил aria‑атрибуты для полей формы.

Дизайнер:

Утвердил цвета, радиусы и типографику в теме.
Проверил поведение в light/dark режимах.

QA:

Тесты на успешную и неуспешную авторизацию.
Тесты на корректное отображение индикатора загрузки.
Тесты на адаптивность и контрастность.

Product Manager:

Подтвердил сценарии входа и восстановление пароля.
Утвердил метрики конверсии для формы входа.

Критерии приёмки

Форма рендерится корректно на разрешениях от 320px до 1440px.
Поле email принимает текст, поле password скрывает ввод.
При отправке отображается индикатор загрузки; после успешного входа — сообщение успеха; при ошибке — сообщение ошибки.
Кнопка переключения темы меняет визуальную тему без перезагрузки.
все интерактивные элементы доступны с клавиатуры и имеют видимые фокусы.

Тест‑кейсы (минимальный набор)

Успешный вход:
- Ввести test@email.com / password
- Нажать Войти
- Ожидать сообщение об успехе
Неуспешный вход:
- Ввести неправильные данные
- Нажать Войти
- Ожидать сообщение об ошибке и очистку полей
Переключение темы:
- Нажать на кнопку переключения
- Убедиться, что цвета поменялись
Доступность:
- Навигация по форме с клавиатуры
- Проверка aria‑атрибутов (если добавлены)

Небольшой словарь (1‑строчные определения)

ChakraProvider — корневой провайдер темы и стилей.
useColorMode — хук для получения и переключения цветовой схемы.
Box / Flex / Stack — примитивы верстки в Chakra.
FormControl / FormLabel — обёртки для полей формы с поддержкой валидации.

Риски и смягчения

Риск: увеличение размера бандла. Смягчение: импортировать только необходимые модули, использовать tree‑shaking и код‑сплиттинг.
Риск: несоответствие дизайн‑гайду. Смягчение: расширить или переопределить тему, создать набор кастомных компонентов.

Социальный превью (рекомендация)

OG title: Chakra UI — быстрая форма входа для React
OG description: Пошаговое руководство по подключению Chakra UI, добавлению переключателя темы и реализации формы входа с валидацией и индикатором загрузки.

Краткое объявление (100–200 слов)

Используйте Chakra UI, чтобы быстро создать консистентный интерфейс входа в React. В этом руководстве показано, как подключить ChakraProvider, добавить переключатель тем, собрать форму входа с полями email и password, обработать состояние через хуки и показать пользователю статусы ошибок и успеха. Пример включает эмуляцию API‑запроса, рекомендации по тестированию и списки задач для разных ролей (разработчик, дизайнер, QA). Если вы делаете MVP или внутренние панели — Chakra ускорит разработку, сохранив гибкость темы и доступность компонентов.

Итог

Chakra UI даёт быстрый путь к аккуратным, доступным интерфейсам в React. Он особенно удобен для MVP и внутренних инструментов, когда важны скорость разработки и консистентность. При строгих требованиях к производительности или уникальному дизайну стоит взвесить альтернативы (Tailwind, MUI или собственная библиотека).