Пишем минималистичный кастомный RadioGroup компонент для React приложения и парочку unit тестов на Jest. Общий план действий состоит из 6 этапов: Понять, что хотим получить Реализовать компонент Option Написать компонент RadioGroup Собрать всё в контейнере и запустить Сделать поддержку ввода с клавиатуры Покрыть тестами Поехали! Нам нужна кастомная радио группа для выбора одного из множества вариантов. Для удобства предположим, что у нас есть некая форма и в ней нужна "выбиралка" периода, для выгрузки какой-либо статистики/контента за определённый период времени. Сделаем компонент в виде горизонтальной плашки, с набором вариантов в виде кнопок. В целом нет никаких ограничений в том, чтобы изменить ui компонента так, как вам это будет требоваться. Feel free to edit, как говорится. По итогу получим вот такой минималистичный компонент. Демо: codesandbox.custom-radio PS: в данной статье не будет описания работы с формами и валидацией. Решений подобных задач очень много, стоит только погуглить). Например один из вариантов я описываю в статье Валидация форм без зависимостей. Поехали! Начнём с того, что определим структуру нашего варианта выбора. Он будет минималистичен и включать 2 параметра: Сам же компонент Options должен уметь делать несколько вещей: отображать один вариант выбора промечать выбранный элемент отличным от других вызывать onChange при выборе клике на элемент При переводе на typescript интерфейс компонента Option выглядит следующим образом: Для стилизации будем использовать css modules для стилизации (поскольку в основе приложения лежит react-create-app с шаблоном ts, то поддержка css modules у нас уже реализована из коробки). Нам достаточно только импортировать стили и применять к элементам: Сам же компонент выглядит очень просто: Простановка data-checked в true закрывает требование "промечать выбранный элемент отличным от других". Затем просто рендерим title и вешаем handleChange на onChange нашего инпута. Компонент RadioGroup должен принимать список options, коллбэк onChange и значение выбранного элемента. Ну и поскольку мы делаем именно Radio group, а не что-то другое, нам нужно проставлять имя этой группы. В итоге получаем интерфейс, состоящий из 4х пропсов: В компоненте нам надо отрендерить список option и объявить handleChange для обработки выбранного элемента. Плюс для оптимизации обернём компонент в React.memo. Для реализации возможности взаимодействия с RadioGroup с клавиатуры, нам потребуется немного доработать наш Option компонент. А именно: в Option нам нужно слушать событие нажатия, но при этом проверять находится ли наш option в фокусе или нет. Если option в фокусе, то вызываем обработчик onClick немного поколдовать с tabindex. В итоге получаем следующие доработки: Мы исключаем input из обхода элементов при использовании клавиши tab, проставляя tabindex в отрицательное значение. И включаем в этот обход div обёртку всего нашего кастомного option. Таким образом дефолтное поведение браузера при фокусе на элемент будет работать для всего нашего компонента. Потом можем через css добавить псевдоклассов focus-visible. activeElement содержит в себе ссылку на элемент документа, который находится в фокусе. Подробнее можно прочитать на MDN: document.activeElement. Есть тонкости в разнице focus и focus-visible, про которые можно почитать в статье Doka:focus-visible Перед началом проставляем атрибут data-testid для каждого Option, для того, чтобы было проще искать элементы в тестах. Про структуру теста и используемые методы можно прочитать в другой моей статье про пагинацию в React приложении в разделе Структура теста. Всё первоначальные настройки для запуска тестов у нас уже есть из коробки create-react-app. Для нашего мини компонента напишем парочку мини тестов. Проверим, что атрибут data-checked проставляется при выборе элемента и корректно вызывается onChange: PS: Про фронтовые тесты есть отличная статья из блога Samokat.tech Как тестировать современный фронтенд. Спасибо за чтение и удачи в написании ваших кастомных компонентов) PS: Ссылки из статьи: Код и демо: codesandbox.custom-radio другие статьи  про Пагинацию в React приложении про Кастомный select для React про Валидацию форм без зависимостей про то, Как тестировать современный фронтенд про React  про create-react-app про React.memo про вёрстку  про Radio group на MDN про document.activeElement про разницу :focus vs :focus-visible Senior frontend engineer