gnb
공무팀 홍길동님

selection Controls

Check box

          
    <div class="checkGroup">
      <label class="check__label">
        <input class="check__input" type="checkbox">
        <span class="check__style"></span>
      </label>
    </div>
    <div class="checkGroup">
      <label class="check__label">
        <input class="check__input" type="checkbox">
        <span class="check__style">text</span>
      </label>
    </div>
    <div class="checkGroup">
      <label class="check__label is-reverse">
        <input class="check__input" type="checkbox">
        <span class="check__style">text</span>
      </label>
    </div>
    <div class="checkGroup"> 
      <label class="check__label">
        <input class="check__input" type="checkbox" checked>
        <span class="check__style">text</span>
      </label>
    </div>
    <div class="checkGroup">
      <label class="check__label is-disabled">
        <input class="check__input" type="checkbox" disabled>
        <span class="check__style">text</span>
      </label>
    </div>
    <div class="checkGroup">
      <label class="check__label is-disabled">
        <input class="check__input" type="checkbox" disabled checked>
        <span class="check__style">text</span>
      </label>
    </div>
    <div class="checkGroup">
      <label class="check__label is-readonly">
        <input class="check__input" type="checkbox">
        <span class="check__style">text</span>
      </label>
    </div>
    <div class="checkGroup">    
      <label class="check__label is-readonly">
        <input class="check__input" type="checkbox" checked>
        <span class="check__style">text</span>
      </label>
    </div>
        
          
    <div class="checkGroup mt-30">
      <label class="check__label is-box">
        <input class="check__input" type="checkbox">
        <span class="check__style">text</span>
      </label>
      <label class="check__label is-box">
        <input class="check__input" type="checkbox" checked>
        <span class="check__style">text</span>
      </label>
      <label class="check__label is-box is-disabled">
        <input class="check__input" type="checkbox" disabled>
        <span class="check__style">text</span>
      </label>
      <label class="check__label is-box is-disabled">
        <input class="check__input" type="checkbox" disabled checked>
        <span class="check__style">text</span>
      </label>
      <label class="check__label is-box is-readonly">
        <input class="check__input" type="checkbox">
        <span class="check__style">text</span>
      </label>
      <label class="check__label is-box is-readonly">
        <input class="check__input" type="checkbox" checked>
        <span class="check__style">text</span>
      </label>
    </div>

Radio Button







          
    <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">
        <span class="radio__style"></span> 텍스트
      </label>
      <label class="radio__label is-readonly">
        <input type="radio" class="radio__input" name="radio3" 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>

Tooltips

          
    <div class="tooltip">
      <button type="button">
        오른쪽 아래
        <span class="tooltip__item">
          <span class="tooltip__content is-rightBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>
    <div class="mb-10"></div>
    <div class="tooltip is-light">
      <button type="button">
        오른쪽 아래
        <span class="tooltip__item">
          <span class="tooltip__content is-rightBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>
    <div class="mb-10"></div>
    <div class="tooltip">
      <button type="button">
        왼쪽 아래로
        <span class="tooltip__item">
          <span class="tooltip__content is-leftBottom">
            설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트  설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
          </span>
        </span>
      </button>
    </div>