<!-- 기본 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="inp_01">레이블</label>
  </div>
  <div class="form-conts">
    <input type="text" id="inp_01" class="krds-input small" placeholder="내용을 입력하세요" spellcheck="false">
  </div>
</div>

<!-- focus 상태 (값 입력) -->
<div class="form-group">
  <div class="form-tit">
    <label for="inp_02">레이블</label>
  </div>
  <div class="form-conts">
    <input type="text" id="inp_02" class="krds-input small focus" value="상태 : focus(값 입력)" spellcheck="false">
  </div>
</div>

<!-- error 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="inp_03">레이블</label>
  </div>
  <div class="form-conts is-error">
    <input type="text" id="inp_03" class="krds-input small" placeholder="상태 : error" spellcheck="false">
  </div>
  <p class="form-hint-invalid">에러 메시지</p>
</div>

<!-- disabled 상태 (입력 없음) -->
<div class="form-group">
  <div class="form-tit">
    <label for="inp_04">레이블</label>
  </div>
  <div class="form-conts">
    <input type="text" id="inp_04" class="krds-input small" disabled placeholder="상태 : disabled(입력 없음)" spellcheck="false">
  </div>
</div>

<!-- disabled 상태 (값 입력) -->
<div class="form-group">
  <div class="form-tit">
    <label for="inp_05">레이블</label>
  </div>
  <div class="form-conts">
    <input type="text" id="inp_05" class="krds-input small" disabled value="상태 : disabled(값 입력)" spellcheck="false">
  </div>
</div>
  

  <!-- 기본 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="sel_01">레이블</label>
  </div>
  <div class="form-conts">
    <select id="sel_01" class="krds-form-select small" title="선택">
      <option value="">항목을 선택하세요</option>
      <option value="">항목1</option>
      <option value="">항목2</option>
      <option value="">항목3</option>
    </select>
  </div>
</div>

<!-- focus 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="sel_02">레이블</label>
  </div>
  <div class="form-conts">
    <select id="sel_02" class="krds-form-select small focus" title="선택">
      <option value="">상태 : focus</option>
      <option value="">항목2</option>
      <option value="">항목3</option>
    </select>
  </div>
</div>

<!-- error 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="sel_03">상태 : error</label>
  </div>
  <div class="form-conts">
    <select id="sel_03" class="krds-form-select small is-error" title="선택">
      <option value="">상태 : error</option>
      <option value="">항목2</option>
      <option value="">항목3</option>
    </select>
  </div>
  <p class="form-hint-invalid">에러 메시지</p>
</div>

<!-- disabled 상태 (입력 없음) -->
<div class="form-group">
  <div class="form-tit">
    <label for="sel_04">레이블</label>
  </div>
  <div class="form-conts">
    <select id="sel_04" class="krds-form-select small" disabled title="선택">
      <option value="">상태 : disabled(입력 없음)</option>
      <option value="">항목2</option>
      <option value="">항목3</option>
    </select>
  </div>
</div>
  

  
<!-- 기본 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="date1">레이블</label>
  </div>
  <div class="form-conts calendar-input w180">
    <input type="text" id="date1" class="krds-input small cal hasDatepicker"
      placeholder="YYYY.MM.DD" title="날짜입력">
  </div>
</div>

<!-- focus 상태 (값 입력) -->
<div class="form-group">
  <div class="form-tit">
    <label for="date2">상태 : focus(값 입력)</label>
  </div>
  <div class="form-conts calendar-conts w180">
    <input type="text" id="date2" class="krds-input small cal hasDatepicker focus"
      placeholder="YYYY.MM.DD" title="날짜입력">
  </div>
</div>

<!-- error 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="date3">상태 : error</label>
  </div>
  <div class="form-conts calendar-conts is-error w180">
    <input type="text" id="date3" class="krds-input small cal hasDatepicker"
      placeholder="YYYY.MM.DD" title="날짜입력">
  </div>
</div>

<!-- disabled 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="cal">상태 : disabled</label>
  </div>
  <div class="form-conts calendar-conts w180">
    <input type="text" id="appl6" class="krds-input small cal hasDatepicker"
      placeholder="YYYY.MM.DD" title="날짜입력">
  </div>
  <p class="form-hint-invalid">에러 메시지</p>
</div>

<!-- disabled 상태 (값 입력) -->
<div class="form-group">
  <div class="form-tit">
    <label for="date5">상태 : disabled(값 입력)</label>
  </div>
  <div class="form-conts calendar-conts w180">
    <input type="text" id="date5" class="krds-input small cal hasDatepicker"
      placeholder="YYYY.MM.DD" title="날짜입력">
  </div>
  <p class="form-hint-invalid">에러 메시지</p>
</div>

<!-- 기간 선택 (range) -->
<div class="form-group">
  <div class="form-tit">
    <label for="cal">기간선택</label>
  </div>
  <div class="form-conts">
    <div class="form-conts calendar-conts">
      <div class="calendar-input">
        <ul class="input-group range set">
          <li>
            <input type="text" class="krds-input small datepicker w180 cal hasDatepicker"
              placeholder="YYYY.MM.DD" title="시작날짜 입력" spellcheck="false" id="dp1758806875133">
          </li>
          <li class="mark">~</li>
          <li>
            <input type="text" class="krds-input small datepicker w180 cal hasDatepicker"
              placeholder="YYYY.MM.DD" title="종료날짜 입력" spellcheck="false" id="dp1758806875134">
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
  
  

  
<!-- 기본 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="text_01">레이블</label>
  </div>
  <div class="form-conts">
    <div class="textarea-wrap">
      <textarea class="krds-input w400" placeholder="플레이스홀더" id="text_01"></textarea>
      <p class="textarea-count">
        <span class="count-now">0</span><span class="count-total">/100</span>
      </p>
    </div>
  </div>
</div>

<!-- focus 상태 (값 입력) -->
<div class="form-group">
  <div class="form-tit">
    <label for="text_02">레이블</label>
  </div>
  <div class="form-conts">
    <div class="textarea-wrap">
      <textarea class="krds-input w400 focus" placeholder="플레이스홀더" id="text_02">값 입력</textarea>
      <p class="textarea-count">
        <span class="count-now">0</span><span class="count-total">/100</span>
      </p>
    </div>
  </div>
</div>

<!-- error 상태 -->
<div class="form-group">
  <div class="form-tit">
    <label for="text_03">레이블</label>
  </div>
  <div class="form-conts">
    <div class="textarea-wrap is-error">
      <textarea class="krds-input w400" placeholder="상태 : error" id="text_03"></textarea>
      <p class="textarea-count">
        <span class="count-now">0</span><span class="count-total">/100</span>
      </p>
    </div>
  </div>
</div>

<!-- disabled 상태 (입력 없음) -->
<div class="form-group">
  <div class="form-tit">
    <label for="text_04">레이블</label>
  </div>
  <div class="form-conts">
    <div class="textarea-wrap">
      <textarea class="krds-input w400" placeholder="플레이스홀더" id="text_04" disabled></textarea>
      <p class="textarea-count">
        <span class="count-now">0</span><span class="count-total">/100</span>
      </p>
    </div>
  </div>
</div>

<!-- disabled 상태 (값 입력) -->
<div class="form-group">
  <div class="form-tit">
    <label for="text_05">레이블</label>
  </div>
  <div class="form-conts">
    <div class="textarea-wrap">
      <textarea class="krds-input w400" placeholder="플레이스홀더" id="text_05" disabled>값입력</textarea>
      <p class="textarea-count">
        <span class="count-now">0</span><span class="count-total">/100</span>
      </p>
    </div>
  </div>
</div>
  

  
<!-- 기본 상태 -->
<div class="krds-form-check medium">
  <input type="radio" name="rdo_1" id="rdo_1-1" />
  <label for="rdo_1-1">라디오버튼</label>
</div>

<!-- disabled 상태 -->
<div class="krds-form-check medium">
  <input type="radio" name="rdo_1" id="rdo_1-2" disabled />
  <label for="rdo_1-2">라디오버튼</label>
</div>

<!-- checked 상태 -->
<div class="krds-form-check medium">
  <input type="radio" name="rdo_1" id="rdo_1-3" checked />
  <label for="rdo_1-3">라디오버튼</label>
</div>

<!-- checked + disabled 상태 -->
<div class="krds-form-check medium">
  <input type="radio" name="rdo_2" id="rdo_1-4" checked disabled />
  <label for="rdo_1-4">라디오버튼</label>
</div>
  

  
<!-- 기본 상태 -->
<div class="krds-form-check">
  <input type="checkbox" name="chk_1" id="chk_1" />
  <label for="chk_1">체크박스</label>
</div>

<!-- disabled 상태 -->
<div class="krds-form-check">
  <input type="checkbox" name="chk_2" id="chk_2" disabled />
  <label for="chk_2">체크박스</label>
</div>

<!-- checked 상태 -->
<div class="krds-form-check">
  <input type="checkbox" name="chk_3" id="chk_3" checked />
  <label for="chk_3">체크박스</label>
</div>

<!-- checked + disabled 상태 -->
<div class="krds-form-check">
  <input type="checkbox" name="chk_4" id="chk_4" checked disabled />
  <label for="chk_4">체크박스</label>
</div>