Form

B2B 서비스에서는 데이터 값을 빠르게 입력하고 정보를 얻는 사용성이 우선이므로 가급적 라인 스타일의 text fields를 지양하고, 사용자가 쉽게 바로 인지하여 입력할 수 있는 박스 형태의 fields를 권장합니다. text fields는 최소 사이즈를 지켜 사용하도록 합니다.

1. Input Box

Input Box는 상황에 맞게 Text Align의 변경과 Icon 등이 추가되어 사용될 수 있습니다.

style	_disabled	_normal	_active	_focus
text_center
text_left
icon
min
textarea

2. Select Box

Select Box는 리스트가 펼쳐져 있을때의 화살표 방향도 고려해야 합니다.

style	disabled	normal	active	check
select
select_list	-

HTML

<div class="-" style="width: 220px;">
    <button type="button" class="-">
        <span class="">select_normal</span>
    </button>
    <div class="jsx-2739147394 menu-list">
        <ul class="-">
            <li class="-">
                <button type="button" class="- alt-color">select_01</button>
            </li>
            <li class="jsx-2739147394">
                <button type="button" class="-">select_02</button>
            </li>
        </ul>
    </div>
</div>

CSS

display: block;
width: 100%;
border: 1px solid #ccc;
vertical-align: top;
text-align: left;
padding: 0 4rem 0 0;
height: 4rem;
color: #999;
background-color: #fff;

3. Text Noti

안내문구 표기용으로 사용됩니다. tit 컬러는 primary 컬러로 변경 가능합니다.

normal	error	tit

<text noti nomal>

<text noti tit>