Input

Text Input

Default text input

  • 입력창은 상황에 따라 목적에 맞는 스타일을 사용합니다.
  • 입력된 내용에 따라 시각적 피드백을 제공합니다.

With Icon_Search

  • 입력창은 상황에 따라 목적에 맞는 스타일을 사용합니다.
  • 입력된 내용에 따라 시각적 피드백을 제공합니다.
          
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input">
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input is-hover">
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input is-error" value="error">
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input" disabled>
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input" readonly value="text">
    </div>

    <div class="formControl">
      <div class="form__search">
        <input type="text" placeholder="입력하세요" class="form__searchInput">
        <button type="button" class="btn__search">검색</button>
      </div>
    </div>
    <div class="formControl">
      <div class="form__search">
        <input type="text" placeholder="입력하세요" class="form__searchInput is-hover">
        <button type="button" class="btn__search">검색</button>
      </div>
    </div>
    <div class="formControl">
      <div class="form__search">
        <input type="text" placeholder="입력하세요" class="form__searchInput is-error" value="error">
        <button type="button" class="btn__search">검색</button>
      </div>
    </div>
    <div class="formControl">
      <div class="form__search">
        <input type="text" placeholder="입력하세요" class="form__searchInput" disabled>
        <button type="button" class="btn__search">검색</button>
      </div>
    </div>
    <div class="formControl">
      <div class="form__search">
        <input type="text" placeholder="입력하세요" class="form__searchInput" readonly value="text">
        <button type="button" class="btn__search">검색</button>
      </div>
    </div>

Text Area

  • 한 줄 이상의 내용을 입력해야 하는 경우 사용합니다.
  • 디테일 폼 안에 배치하는 것을 기본으로 합니다.
  • 예시와 같이 최대 입력 가능한 텍스트 수를 오른쪽 하단에 배치합니다.
기타 의견 기술 0 / 500 
          
    <textarea class="form__textarea" placeholder="입력하세요"></textarea>
    <textarea class="form__textarea is-hover"></textarea>
    <textarea class="form__textarea is-error">error message</textarea>
    <textarea class="form__textarea" placeholder="disabled" disabled=""></textarea>
    <textarea class="form__textarea" placeholder="readonly" readonly="">It cannot be entered or modified by the user.</textarea>
    <table class="table">
      <colgroup>
        <col style="width:15rem;">
        <col>
      </colgroup>
      <tbody>
        <tr>
          <th>기타 의견 기술</th>
          <td>
            <textarea class="form__textarea" placeholder="기타 의견을 기술해주세요." style="width:calc(100% - 10rem);"></textarea>
            <span class="align-bottom ml-10">0 / 500</span>
          </td>
        </tr>
      </tbody>
    </table>