Radio button

Radio button (라디오 버튼)

radio 클래스는 <input type="radio"> HTML 요소를 감싸는 간단한 래퍼예요. 역시 의도적으로 스타일을 입히지 않아 브라우저 간 호환성과 사용자 경험을 그대로 유지해요.

출처: 문서

본문

radio 클래스는 <input type="radio"> HTML 요소를 감싸는 간단한 래퍼예요. 크로스 브라우저 호환성과 사용자 경험을 보존하기 위해 의도적으로 스타일을 입히지 않아요.

연결된 라디오 버튼들이 name HTML 속성에 대해 같은 값을 가지도록 확인해 주세요.

Yes · No

<div class="control">
  <label class="radio">
    <input type="radio" name="answer" />
    Yes
  </label>
  <label class="radio">
    <input type="radio" name="answer" />
    No
  </label>
</div>

<input> 요소에 checked HTML 속성을 추가하면 라디오 버튼을 기본으로 체크 상태로 만들 수 있어요.

Foo · Bar

<div class="control">
  <label class="radio">
    <input type="radio" name="foobar" />
    Foo
  </label>
  <label class="radio">
    <input type="radio" name="foobar" checked />
    Bar
  </label>
</div>

<label>과 <input> 양쪽에 disabled HTML 속성을 추가하면 라디오 버튼을 비활성화할 수 있어요.

Going · Not going · Maybe

<div class="control">
  <label class="radio">
    <input type="radio" name="rsvp" />
    Going
  </label>
  <label class="radio">
    <input type="radio" name="rsvp" />
    Not going
  </label>
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled />
    Maybe
  </label>
</div>

라디오 버튼 목록 (List of Radio Buttons)

여러 개의 라디오 버튼을 나열하고 싶다면 <div class="radios"> 요소로 감싸요:

Going · Not going · Maybe

<div class="radios">
  <label class="radio">
    <input type="radio" name="rsvp" />
    Going
  </label>
  <label class="radio">
    <input type="radio" name="rsvp" />
    Not going
  </label>
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled />
    Maybe
  </label>
</div>

더 알아보기 (Learn more)