name 속성

radio태그의 속성 값으로 name을 주면 radio 버튼 사이의 연관성을 주게 되어 한개만 선택이 가능하다.

name 값을 주질 않으면 버튼을 클릭하면 checkbox처럼 모든 버튼이 다 클릭되는 문제가 발생한다.

<div className='col-sm-1'>
                <span> {title}</span>
            </div>
            {labels.map((label, idx) => (
                <div key={idx + label} className='form-check col-sm-2'>
                    <input
                        className='form-check-input'
                        type='radio'
                        id={label + idx}
                        defaultChecked={idx === 0}
                        value={values[idx]}
                        onChange={(e) => onChangeRadio(e)}
                        name={name}
                    />
                    <label className='form-check-label' htmlFor={label + idx}>
                        {label}
                    </label>
                </div>
            ))}

참고사이트

---

https://daydreamer-92.tistory.com/20