Select

Компонент Select в Chakra UI представляет собой стилизованный элемент выпадающего списка, аналог стандартного HTML <select>, но с расширенными возможностями кастомизации, интеграции с формами и поддержкой темизации. Он позволяет выбирать одно значение из предопределённого списка опций и полностью управляется через свойства React.

import { Sel ect } from "@chakra-ui/react";

<Sel ect placeholder="Выберите вариант">
  <option value="option1">Вариант 1</option>
  <option value="option2">Вариант 2</option>
  <option value="option3">Вариант 3</option>
</Select>

Ключевые свойства:

  • placeholder — текст по умолчанию, отображается до выбора значения.
  • value — текущее выбранное значение, управляемое через состояние React.
  • onChange — функция-обработчик события изменения значения.
  • size — размеры компонента: "sm", "md", "lg".
  • variant — визуальный стиль: "outline", "filled", "flushed", "unstyled".
  • isDisabled — блокировка компонента.
  • isInvalid — пометка поля как ошибочного (например, для валидации).

Управление состоянием Select

Для контроля выбранного значения чаще всего используют хук useState:

import { useState } fr om "react";
import { Sel ect } fr om "@chakra-ui/react";

function Example() {
  const [value, setValue] = useState("");

  return (
    <Sel ect
      placeholder="Выберите цвет"
      value={value}
      onCha nge={(e) => setValue(e.target.value)}
    >
      <option value="red">Красный</option>
      <option value="green">Зелёный</option>
      <option value="blue">Синий</option>
    </Select>
  );
}

Такой подход обеспечивает полное управление компонентом через состояние React, позволяя синхронизировать выбор пользователя с другими частями интерфейса.

Варианты стилизации и размеры

Chakra UI поддерживает различные варианты оформления:

<Select variant="outline" placeholder="Outline" />
<Select variant="filled" placeholder="Filled" />
<Select variant="flushed" placeholder="Flushed" />
<Select variant="unstyled" placeholder="Unstyled" />

Каждый вариант имеет свои визуальные особенности. Outline — стандартная рамка, filled — заполненный фон, flushed — без верхней и боковой границы, unstyled — полностью без стилей, позволяя применять собственный CSS.

Свойство size управляет высотой и внутренними отступами:

<Select size="sm" placeholder="Small" />
<Select size="md" placeholder="Medium" />
<Select size="lg" placeholder="Large" />

Интеграция с формами

Компонент Select полностью совместим с библиотеками для работы с формами, такими как Formik и React Hook Form.

Пример использования с React Hook Form:

import { useForm, Controller } fr om "react-hook-form";
import { Sel ect } fr om "@chakra-ui/react";

function FormExample() {
  const { control, handleSubmit } = useForm();

  const onSub mit = (data) => console.log(data);

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <Controller
        name="fruit"
        control={control}
        render={({ field }) => (
          <Select {...field} placeholder="Выберите фрукт">
            <option value="apple">Яблоко</option>
            <option value="banana">Банан</option>
            <option value="orange">Апельсин</option>
          </Select>
        )}
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

Использование Controller позволяет компоненту Select работать как контролируемый элемент формы и корректно передавать данные в объект формы.

Работа с disabled и invalid состояниями

Свойства isDisabled и isInvalid позволяют управлять состоянием компонента без дополнительной логики:

<Select placeholder="Выберите язык" isDisabled>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
</Select>

<Select placeholder="Выберите язык" isInvalid>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
</Select>
  • isDisabled блокирует выбор и делает компонент визуально недоступным.
  • isInvalid подсвечивает компонент как ошибочный, часто используется при валидации данных формы.

Группировка и доступные опции

Chakra UI Select поддерживает группы опций через стандартный HTML <optgroup>:

<Select placeholder="Выберите животное">
  <optgroup label="Млекопитающие">
    <option value="dog">Собака</option>
    <option value="cat">Кошка</option>
  </optgroup>
  <optgroup label="Птицы">
    <option value="eagle">Орёл</option>
    <option value="parrot">Попугай</option>
  </optgroup>
</Select>

Это улучшает читаемость длинных списков и обеспечивает логическую сегментацию данных.

Кастомизация через темы

Select полностью интегрируется с темами Chakra UI, позволяя изменять цвета, шрифты и другие визуальные параметры через объект theme:

import { extendTheme } fr om "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Select: {
      baseStyle: {
        field: {
          borderColor: "purple.500",
          _hover: { borderColor: "purple.700" },
        },
      },
      sizes: {
        xl: { field: { fontSize: "xl", px: 4, py: 3 } },
      },
      variants: {
        custom: {
          field: { bg: "gray.100", borderRadius: "md" },
        },
      },
    },
  },
});

Такой подход позволяет создавать уникальные стилизованные Select-компоненты без повторения стилей в каждом элементе.

Доступность (Accessibility)

Select автоматически поддерживает базовые ARIA-атрибуты, такие как aria-invalid при использовании isInvalid, что обеспечивает корректное восприятие компонента для пользователей с ограниченными возможностями.

Дополнительно можно использовать свойства aria-label и aria-describedby для более сложных сценариев:

<Select aria-label="Выбор страны" placeholder="Выберите страну">
  <option value="ru">Россия</option>
  <option value="us">США</option>
</Select>

Это делает компонент совместимым с инструментами экранного чтения и соответствует стандартам WCAG.

Chakra UI Select сочетает простоту HTML <select> с мощью React и стилями из Chakra UI, предоставляя гибкость управления состоянием, визуальную кастомизацию и полную интеграцию с формами. Использование вариантов, размеров, состояний и тем позволяет создавать профессиональные интерфейсы без необходимости писать собственные стили с нуля.

Оглавление