Форма радиовхода с пользовательскими кнопками

Question

Я хотел бы добиться поведения радио входа, но с пользовательскими кнопками (вместо этих круглых флажков).

В конце поведение должно быть таким же (только 1 должен быть выбран), и при нажатии он должен сохранить свое состояние (на изображении был выбран option1 ).

Я использую React, но я с любым другим предложением может помочь

Answer 1

Может быть radio не самый лучший для того, что вам нужно. Вы должны создать компонент с selectedTab реквизитом, который меняет стиль на div (например), чтобы придать ему красный цвет, и проверить, какая вкладка выбрана с помощью этого реквизита.

Например

// ...

<div className={selectedTab === 1 ? "red" : "gray"} onClick={() => setSelectedTab(1)} />
<div className={selectedTab === 2 ? "red" : "gray"} onClick={() => setSelectedTab(2)} />

// ...