Looking for a way to dynamically generate radio buttons in Next.js using a list of strings? Utilizing Tailwind CSS classes, you can modify the appearance of these buttons when checked by leveraging the peer/identifier classname. But how do you include the string from the list within the className? Check out my solution below.
<fieldset>
<legend>Some Radio Buttons</legend>
{names.map((name: string) => (
<>
<input id={name} className="peer/{name} appearance-none absolute h-0 w-0 opacity-0" type="radio"/>
<label htmlFor={name} className={"rounded-button peer-checked/{name}:bg-indigo-500"}>
<span>{name}</span>
</label>
</>
))}
</fieldset>