Input

좌측 코드가 개발 전달용 정식 마크업, 우측이 적용 UI(상태 시연 포함). 코드블럭 우상단 Copy 로 복사하세요.

Input — Basic .input · 높이 44 
<!-- 기본 -->
<input type="text" class="input" placeholder="Guide Text">

<!-- 입력값(Done) -->
<input type="text" class="input" value="Input Text">

<!-- 비활성 -->
<input type="text" class="input" placeholder="Guide Text" disabled>

<!-- 에러 -->
<input type="text" class="input is-error" placeholder="Guide Text">

<!-- 읽기전용(Read Only) -->
<input type="text" class="input" value="Input Text" readonly>

<!-- Hover·Select(focus)는 :hover / :focus 로 자동 -->
Normal
Hover
Select (focus)
Done
Disabled
Disabled (Guide)
Error
Read Only
Input — Large .input.input-lg · 높이 50 
<input type="text" class="input input-lg" placeholder="Guide Text">

<!-- 입력값 / 비활성 / 에러는 Basic 과 동일 -->
<input type="text" class="input input-lg" value="Input Text">
<input type="text" class="input input-lg" value="Input Text" disabled>
<input type="text" class="input input-lg is-error" placeholder="Guide Text">
Normal
Done
Disabled
Error
Input + Title .form-row + .form-label 
<div class="form-row">
  <label class="form-label">Input Title <span class="req">*</span></label>
  <input type="text" class="input" placeholder="Guide Text">
</div>
Input + Img (아이콘) .input-icon · 좌측 아이콘 + input 
<div class="input-icon">
  <i class="ico ico-guide-info"></i>
  <input type="text" placeholder="Guide Text">
</div>
Normal
Done
TextArea .textarea + .textarea-field + .textarea-count · 높이 140 · 글자수 카운터 
<div class="textarea">
  <textarea class="textarea-field" placeholder="내용 입력" maxlength="100"></textarea>
  <p class="textarea-count"><b>0</b> / 100</p>
</div>

<!-- Focus(테두리 Primary)는 :focus-within 로 자동 -->
Normal (작성 전)

0 / 100

Focus (작성 중)

4 / 100

Done (작성 완료)

64 / 100

Resize Handle .input-resize · 세로 리사이즈 + 우하단 핸들(CAMS) 
<div class="input-resize">
  <textarea class="input-resize-field" rows="1" placeholder="Guide Text"></textarea>
  <i class="ico ico-resize-handle input-resize-handle"></i>
</div>

<!-- 우하단 핸들 드래그로 세로 리사이즈. Focus(Primary)는 :focus-within 자동 -->
Normal
Done