폼·텍스트 입력·검증
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
텍스트 필드 Text Field
한 줄의 문자·숫자 등을 입력받는 컨트롤.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
텍스트 영역 Text Area
여러 줄의 긴 문장을 입력받는 필드.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
비밀번호 필드 Password Field
비밀 문자를 가려 표시하는 입력 필드.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
검색 필드 Search Field
검색어 입력에 맞춰 설계된 입력 컨트롤.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
입력 레이블 Label
입력 항목의 의미를 명시하는 텍스트.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
플레이스홀더 Placeholder
아직 입력되지 않은 필드 안에 보이는 예시 문구.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
도움말 텍스트 Helper Text
입력 규칙·형식·보조 설명을 안내하는 텍스트.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
인라인 오류 Inline Error
문제가 있는 필드 인근에 나타나는 구체적 오류 설명.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
필드 유효성 검증 Field Validation
개별 입력값이 규칙을 충족하는지 확인.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
실시간 검증 Real-time Validation
입력 과정 중 적절한 시점에 규칙 충족을 확인.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
폼 수준 검증 Form-level Validation
제출 시 여러 입력값을 종합 검증.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
오류 요약 Error Summary
폼의 모든 오류를 상단 등 한곳에 모아 제공.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
필수 입력 표시 Required Field Indicator
필수 입력 항목을 별표·텍스트 등으로 나타냄.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
글자 수 카운터 Character Counter
입력한 문자 수 또는 남은 허용 글자 수를 표시.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
입력 마스크 Input Mask
전화번호·날짜 등의 입력 형식을 제한·안내.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
입력 접두·접미 Input Prefix / Suffix
원·%·URL 등 단위나 고정 기호를 필드 앞뒤에 표시.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
자동완성 Autocomplete
입력 중 예상 값을 제안하거나 완성.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
자동 제안 Autosuggest
입력어에 연관된 검색어·항목을 제안.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
일회용 코드 입력 OTP Input
인증번호처럼 정해진 자리수의 코드를 입력.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
숫자 입력 필드 Number Input
숫자값을 입력하고 경우에 따라 증감 조작 제공.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
날짜 선택기 Date Picker
달력 등의 UI에서 날짜를 선택.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
시간 선택기 Time Picker
시각을 선택할 수 있는 입력 도구.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
날짜 범위 선택기 Date Range Picker
시작일과 종료일을 함께 선택.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
파일 업로더 File Uploader
파일을 선택하고 전송 상태를 관리하는 입력 컴포넌트.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
드래그 업로드 영역 Drag-and-drop Upload Zone
파일을 끌어 놓아 추가하는 영역.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
리치 텍스트 에디터 Rich Text Editor
서식이 포함된 텍스트를 편집하는 입력기.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
폼 마법사 Form Wizard
복잡한 입력을 여러 단계로 나누어 안내하는 흐름.
폼·텍스트 입력·검증에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Forms, Text Input & Validation
Open an entry for its visual reference, comparisons and source-language text.
Text Field 텍스트 필드
A control for entering one line of text or numbers.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Text Area 텍스트 영역
A field for entering longer, multi-line text.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Password Field 비밀번호 필드
An input field that conceals secret characters.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Search Field 검색 필드
An input control designed for entering a search query.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Label 입력 레이블
Text that identifies the meaning of an input field.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Placeholder 플레이스홀더
Example text shown inside an empty input field.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Helper Text 도움말 텍스트
Text explaining input rules, expected formats, or supporting information.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Inline Error 인라인 오류
A specific error explanation displayed near the affected field.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Field Validation 필드 유효성 검증
Checking whether an individual input value satisfies its rules.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Real-time Validation 실시간 검증
Checking input requirements at appropriate moments while the user enters data.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Form-level Validation 폼 수준 검증
Validating multiple input values together when a form is submitted.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Error Summary 오류 요약
A consolidated list of form errors, often displayed at the top of the form.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Required Field Indicator 필수 입력 표시
An asterisk or text identifying an input as required.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Character Counter 글자 수 카운터
An indicator of entered characters or the remaining character allowance.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Input Mask 입력 마스크
A pattern that constrains or guides entry of values such as dates or phone numbers.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Input Prefix / Suffix 입력 접두·접미
A fixed unit or symbol, such as a currency sign or percent sign, beside an input value.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Autocomplete 자동완성
Suggesting or completing an expected value while the user types.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Autosuggest 자동 제안
Suggesting queries or items related to the entered text.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
OTP Input 일회용 코드 입력
An input for a fixed-length code, such as a one-time verification code.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Number Input 숫자 입력 필드
A numeric input that may also provide increment and decrement controls.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Date Picker 날짜 선택기
An interface for choosing a date, commonly from a calendar.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Time Picker 시간 선택기
An input tool for selecting a time.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Date Range Picker 날짜 범위 선택기
A control for selecting a start date and an end date together.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
File Uploader 파일 업로더
An input component for selecting files and managing upload progress.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Drag-and-drop Upload Zone 드래그 업로드 영역
An area where files can be added by dragging and dropping them.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Rich Text Editor 리치 텍스트 에디터
An editor for text that includes formatting.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Form Wizard 폼 마법사
A flow that guides the user through a complex form in multiple steps.
Specifying forms, text inputs, and validation.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.