---
description: Хук для управления визуальным отображением фокуса при навигации с клавиатуры.
---

<Overview type="hook">

# useFocusVisible

Хук для управления визуальным отображением фокуса при навигации с клавиатуры.
Позволяет показывать стили фокуса только при клавиатурном вводе, улучшая пользовательский опыт и доступность.

</Overview>

## API

### Возвращаемое значение

Объект со свойствами:

| Свойство       | Тип                           | Описание                                                       |
| -------------- | ----------------------------- | -------------------------------------------------------------- |
| `focusVisible` | `boolean`                     | Флаг видимости фокуса (true только при клавиатурной навигации) |
| `onFocus`      | `(event: FocusEvent) => void` | Обработчик события фокуса                                      |
| `onBlur`       | `(event: FocusEvent) => void` | Обработчик события потери фокуса                               |

## Особенности работы

- **Умное определение источника фокуса**

  Стили фокуса активируются только при навигации с помощью `Tab`/`Shift+Tab` и использовании клавиатурных стрелок.

- **Игнорирование использование мыши**

  При клике мышью фокус-стили не отображаются.

## Рекомендации

Используйте для:

- Кастомных элементов управления (кнопки, ссылки, поля ввода).
- Компонентов с собственной логикой фокуса.
- Доступных интерфейсов (`a11y`).
- Сочетайте с CSS-переходами для плавного появления фокуса.

## Пример использования

{/* @example-description: Фокус только с клавиатуры. */}
<Playground>
  ```jsx
  const { focusVisible, onFocus, onBlur } = useFocusVisible();

  return (
    <Box
      role="button"
      tabIndex={1}
      onFocus={onFocus}
      onBlur={onBlur}
      padding="system"
      style={{
        borderRadius: '8px',
        outline: focusVisible ? "2px solid #2D81E0" : "none",
        outlineOffset: 2,
        transition: "outline 0.15s ease-in",
      }}
    >
      Сфокусируйся на меня через Tab
    </Box>
  );
  ```
</Playground>