default text input

          
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input">
      <button class="form__clear">입력된 내용 삭제</button>
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input is-hover">
      <button class="form__clear">입력된 내용 삭제</button>
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input is-error" value="error">
      <button class="form__clear">입력된 내용 삭제</button>
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input" disabled>
      <button class="form__clear">입력된 내용 삭제</button>
    </div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input" readonly value="text">
      <button class="form__clear">입력된 내용 삭제</button>
    </div>
        

number input

          
    <div class="formControl">
      <input type="text" placeholder="0" class="form__input is-num">
    </div>
    <div class="mb-10"></div>
    <div class="formControl">
      <input type="text" placeholder="0" class="form__input is-num" value="0">
    </div>
        

search

          
    <div class="formControl">
      <div class="form__search">
        <input type="text" placeholder="입력하세요" class="form__searchInput">
        <button class="form__clear display-none">입력된 내용 삭제</button>
        <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 class="form__clear display-none">입력된 내용 삭제</button>
        <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 class="form__clear display-none">입력된 내용 삭제</button>
        <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 class="form__clear display-none">입력된 내용 삭제</button>
        <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 class="form__clear display-none">입력된 내용 삭제</button>
        <button type="button" class="btn__search">검색</button>
      </div>
    </div>
        

lavel+Input+description

Description

Description - error message

Description

선택옵션1 선택옵션2 선택옵션3

Description

Description

Description

Description

          
    <div class="label">Label</div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input">
      <button class="form__clear">입력된 내용 삭제</button>
    </div>
    <p class="description">Description</p>

    <div class="label">Label</div>
    <div class="formControl">
      <input type="text" placeholder="입력하세요" class="form__input is-error" value="error">
      <button class="form__clear">입력된 내용 삭제</button>
    </div>
    <p class="description is-error">Description - error message</p>

    <div class="label">Label</div>
    <div class="formControl">
      <div class="form__search">
        <input type="text" placeholder="입력하세요" class="form__searchInput">
        <button class="form__clear display-none">입력된 내용 삭제</button>
        <button type="button" class="btn__search">검색</button>
      </div>
    </div>
    <p class="description">Description</p>

    <div class="label">Label</div>
    <select class="formSelect is-option">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <p class="description">Description</p>

    <div class="label">Label</div>
    <div class="formControl">
      <input type="date" placeholder="입력하세요" class="form__calendar">
    </div>
    <p class="description">Description</p>

    <div class="label">Label</div>
    <div class="formControl justify-content-between">
      <div class="form__placeholderWrap">
        <input type="date" placeholder="YYYY-MM-DD" class="form__calendar" required aria-required="true">
        <label>시작일</label>
      </div>
      <div class="form__placeholderWrap">
        <input type="date" placeholder="YYYY-MM-DD" class="form__calendar" required aria-required="true">
        <label>종료일</label>
      </div>
    </div>
    <p class="description">Description</p>
    
    <div class="label">Label</div>
    <textarea class="form__textarea" placeholder="입력하세요"></textarea>
    <p class="description">Description</p>
        

Label

          
    <div class="label">Label</div>
    <div class="label is-essential">Label</div>
          
        

default dropdown

선택옵션1 선택옵션2 선택옵션3 선택옵션1 선택옵션2 선택옵션3 선택옵션1 선택옵션2 선택옵션3 선택옵션1 선택옵션2 선택옵션3 선택옵션1 선택옵션2 선택옵션3

          
    <select class="formSelect is-option">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-hover">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-error">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-disabled">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
    <select class="formSelect is-option is-readonly">
      <option value="선택옵션1">선택옵션1</option>
      <option value="선택옵션2">선택옵션2</option>
      <option value="선택옵션3">선택옵션3</option>
    </select>
        

dropdown Calendar

Date Picker

          
    <div class="formControl">
      <input type="date" placeholder="입력하세요" class="form__calendar">
    </div>
    <div class="formControl">
      <input type="date" placeholder="입력하세요" class="form__calendar is-hover">
    </div>
    <div class="formControl">
      <input type="date" placeholder="입력하세요" class="form__calendar is-error">
    </div>
    <div class="formControl">
      <input type="date" placeholder="입력하세요" class="form__calendar" disabled>
    </div>
    <div class="formControl">
      <input type="date" placeholder="입력하세요" class="form__calendar" readonly>
    </div>
        

Time Picker

          
    <div class="formControl">
      <input type="time" placeholder="입력하세요" class="form__time">
    </div>
    <div class="mb-10"></div>
    <div class="formControl">
      <input type="time" placeholder="입력하세요" class="form__time is-hover">
    </div>
    <div class="mb-10"></div>
    <div class="formControl">
      <input type="time" placeholder="입력하세요" class="form__time is-error">
    </div>
    <div class="mb-10"></div>
    <div class="formControl">
      <input type="time" placeholder="입력하세요" class="form__time" disabled>
    </div>
    <div class="mb-10"></div>
    <div class="formControl">
      <input type="time" placeholder="입력하세요" class="form__time" readonly>
    </div>
        

error message text

          
    <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="">text</textarea>