Components

Text field

Tells people what to enter and why. Keep the label visible at all times, even while typing.사용자가 입력할 정보와 그 이유를 알려줍니다. 레이블은 입력 중에도 항상 보이도록 유지합니다.

Validation preview

Live previewDYNGLE UI

Anatomy구조

Email이메일 (optional선택)

hello@example.com

We'll only send connection updates.연결 소식만 보내 드려요.

1
Label레이블
Always visible. Mark optional fields instead of required ones.항상 보입니다. 필수가 아닌 선택 항목에 표시를 붙입니다.
2
Field입력 영역
48px tall with 16px text, so mobile browsers don't zoom in.높이 48px, 글자 16px로 모바일 브라우저의 자동 확대를 막습니다.
3
Helper / error text도움말 / 오류 문구
Connected with aria-describedby. Errors replace the hint in the same place.aria-describedby로 연결합니다. 오류는 같은 자리에서 도움말을 대신합니다.

Markup

HTML

<label class="dy-label" for="email">Email</label>
<input class="dy-input" id="email" type="email"
  aria-describedby="email-help" required>
<p class="dy-hint" id="email-help">
  Enter the address where you'd like updates.
</p><label class="dy-label" for="email">이메일</label>
<input class="dy-input" id="email" type="email"
  aria-describedby="email-help" required>
<p class="dy-hint" id="email-help">
  안내를 받을 주소를 입력해 주세요.
</p>

Usage사용 가이드

Labels stay visible레이블은 항상 보이게

Do권장

Put the label above the field and use the placeholder only for a format example.레이블은 입력 영역 위에 두고, placeholder는 형식 예시에만 씁니다.

Don't지양

Don't use a placeholder in place of a label. It disappears as soon as people start typing.placeholder를 레이블 대신 쓰지 않습니다. 입력을 시작하면 사라집니다.

Errors explain the fix오류는 고치는 방법을

Do권장

Keep the entered value and explain how to fix it below the field. Set aria-invalid and move focus to the field with the error.입력값을 유지하고 필드 아래에 수정 방법을 제시합니다. aria-invalid를 설정하고 오류 필드로 포커스를 옮깁니다.

Don't지양

Don't blame people or show only 'Invalid input'. Don't show errors before anything has been entered.사용자를 탓하거나 '잘못된 입력'만 표시하지 않습니다. 입력하기 전부터 오류를 보이지 않습니다.

Input types입력 유형

Information정보	Attributes속성
Email이메일	type="email" autocomplete="email"
Phone전화번호	type="tel" autocomplete="tel" inputmode="tel"
Name이름	autocomplete="name"
Verification code인증 번호	inputmode="numeric" autocomplete="one-time-code"
Search검색	type="search" enterkeyhint="search"

#Validation preview

#Anatomy구조

#Markup

#Usage사용 가이드

#Labels stay visible레이블은 항상 보이게

#Errors explain the fix오류는 고치는 방법을

#Input types입력 유형