Radio

라디오 버튼은 여러 옵션 중에서 단 하나의 옵션을 선택할 수 있는 입력 요소입니다.
각 라디오 버튼은 그룹 내에서 고유한 값을 갖고 있으며, 사용자가 그룹 내에서 하나의 옵션을 선택하면 다른 옵션들은 자동으로 선택 해제됩니다.

기본 가이드

설계 단계의 특별한 UX 요청이나 개발 환경에 따른 제약으로 개발 요청 사항이 없다면 테스트 완료된 코드를 복사 붙여 넣기를 기본으로 합니다.

협의 할 점

접근성 가이드

:focus-visible{outline: -webkit-focus-ring-color auto 1px;}

Radio : default

컴포넌트 클래스 : .component-radio
컴포넌트 자식 클래스 : .radio-inner
input 컴포넌트 가상클래스 : :checked :disabled :checked + disabled


 <!-- radio : 기본 -->
 <br>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0001" name="temp_radio_0001">
  </label>
</div>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0002" name="temp_radio_0001" checked>
  </label>
</div>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0003" name="temp_radio_0001" disabled>
  </label>
</div>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0101" name="temp_radio_0100" checked disabled>
  </label>
</div>

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Radio + 텍스트

컴포넌트 자식 클래스 : .radio-item
input 컴포넌트 가상클래스 : :checked :disabled :checked + disabled


 <!-- radio : input + 텍스트 -->
<br>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0201" name="temp_radio_0200">
    <span class="radio-item">
      <span class="radio-txt">Radio default</span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0202" name="temp_radio_0200" checked>
    <span class="radio-item">
      <span class="radio-txt">Radio checked</span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0203" name="temp_radio_0200" disabled>
    <span class="radio-item">
      <span class="radio-txt">Radio disabled</span>
    </span>
  </label>
</div>
<br>
<br>
<div class="component-radio">
  <label class="radio-inner">
    <input type="radio" id="temp_radio_0301" name="temp_radio_0300" checked disabled>
    <span class="radio-item">
      <span class="radio-txt">Radio checked + disabled</span>
    </span>
  </label>
</div>
<br>

/* css 주석 사용시 이 주석사용 부탁드립니다. */