input tag type='radio' 그룹 중 하나만 선택되게 하기

input을 이용한 입력은 아주 기본적이지만 이번에 radio button 직접 구현하다보니 여러 세트 중 하나만 선택되도록 하는 방법을 모르고 있던 점에 당황하여 기록해둔다.

 

문제: 라디오버튼이 여러 개 동시에 선택됨

코드

<label>
	<input type="radio" value={'public'} />
	Public Mode
</label>
<label>
	<input type="radio" value={'private'} />
	Private Mode
</label>

 

결과: 둘 다 선택 가능

 

 

해결: input tag의 attribute로 name 추가

코드

<label>
	<input type="radio" name="network_setting" value={'public'} />
	Public Mode
</label>
<label>
	<input type="radio" name="network_setting" value={'private'} />
	Private Mode
</label>

 

결과: 동일한 name attribute를 가진 라디오버튼 중 하나만 선택 가능

 

 

끝.