selection Controls

Check box

  • 체크 박스는 하나 이상의 값을 선택할 때 사용합니다.







Radio Button

  • 라디오 버튼은 다중의 선택사항 중 하나만 택할 때 사용합니다.
  • 선택지가 5개 이상일 경우 드롭다운 리스트를 권장합니다.
  • Default 상태는 Selected 값을 반드시 포함하도록 합니다.






          
    <div class="checkGroup">
      <label class="check__label">
        <input class="check__input" type="checkbox">
        <span class="check__style"></span>
      </label>
      <label class="check__label">
        <input class="check__input" type="checkbox">
        <span class="check__style">텍스트</span>
      </label>
      <label class="check__label is-reverse">
        <input class="check__input" type="checkbox">
        <span class="check__style">텍스트</span>
      </label>
      <label class="check__label">
        <input class="check__input" type="checkbox" checked>
        <span class="check__style">텍스트</span>
      </label>
      <label class="check__label is-disabled">
        <input class="check__input" type="checkbox" disabled>
        <span class="check__style">텍스트</span>
      </label>
      <label class="check__label is-disabled">
        <input class="check__input" type="checkbox" disabled checked>
        <span class="check__style">텍스트</span>
      </label>
      <label class="check__label is-readonly">
        <input class="check__input" type="checkbox" onclick="return false;">
        <span class="check__style">텍스트</span>
      </label>
      <label class="check__label is-readonly">
        <input class="check__input" type="checkbox" onclick="return false;" checked>
        <span class="check__style">텍스트</span>
      </label>
    </div>

    <div class="radioGroup">
      <label class="radio__label">
        <input type="radio" class="radio__input" name="radio1">
        <span class="radio__style"></span> 텍스트
      </label>
      <label class="radio__label is-reverse">
        <input type="radio" class="radio__input" name="radio1">
        텍스트 <span class="radio__style"></span>
      </label>
      <label class="radio__label">
        <input type="radio" class="radio__input" name="radio1" checked>
        <span class="radio__style"></span> 텍스트
      </label>
      <label class="radio__label is-disabled">
        <input type="radio" class="radio__input" name="radio2" disabled>
        <span class="radio__style"></span> 텍스트
      </label>
      <label class="radio__label is-disabled">
        <input type="radio" class="radio__input" name="radio2" disabled checked>
        <span class="radio__style"></span> 텍스트
      </label>
      <label class="radio__label is-readonly">
        <input type="radio" class="radio__input" name="radio3" onclick="return false;">
        <span class="radio__style"></span> 텍스트
      </label>
      <label class="radio__label is-readonly">
        <input type="radio" class="radio__input" name="radio3" onclick="return false;" checked>
        <span class="radio__style"></span> 텍스트
      </label>
    </div>

Loader(Spinners)

Large

Small

          
    <div class="loader">
      <div class="spinner">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <div class="loader is-sm">
      <div class="spinner">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>