Text field
글자를 직접 써 넣는 네모 칸이에요
누르면 테두리가 바뀌고 글을 쓸 수 있어요
이럴 때 써요
- 택배 주문할 때 이름·연락처 적는 칸
- 회원가입에서 아이디 쓰는 칸
- 홈페이지 '문의하기'에 내용 적는 칸
#텍스트필드#TextField#입력칸#회원가입
Placeholder
빈 입력칸 속에 흐린 안내 글자가 있어요
글을 쓰기 시작하면 쓱 사라져요
이럴 때 써요
- 검색창 속 '예: 부산 맛집' 같은 흐린 예시 글자
- 주소 칸의 '도로명, 건물명으로 검색' 안내
- 홈페이지 문의 칸의 '내용을 적어 주세요'
#플레이스홀더#Placeholder#입력안내#예시문구
Floating label
칸 안에 있던 이름표가
누르면 위로 작게 떠올라요
이럴 때 써요
- 은행·카드 앱 로그인 화면의 이메일 칸
- 배달앱 주소 입력 칸
- 칸이 많은 신청서를 좁은 화면에 넣을 때
#플로팅라벨#FloatingLabel#입력칸#로그인화면
Helper text
입력칸 바로 아래에
어떻게 쓰면 되는지 작게 알려줘요
LOOP닉네임
한글 2~10자, 나중에 바꿀 수 있어요
이럴 때 써요
- 비밀번호 칸 아래 '영문·숫자 포함 8자 이상'
- 닉네임 칸 아래 '나중에 바꿀 수 있어요'
- 신청서의 '사업자번호는 - 없이 숫자만'
#헬퍼텍스트#HelperText#도움말#신청서
Inline validation
다 쓰고 버튼 누르기 전에
쓰는 그 자리에서 맞는지 알려줘요
이럴 때 써요
- 회원가입의 '사용할 수 있는 아이디예요'
- 이메일 형식이 틀리면 칸이 빨개질 때
- 온라인 신청서에 전화번호를 잘못 적었을 때
#인라인밸리데이션#InlineValidation#입력확인#회원가입
Password toggle
●●●로 가려진 비밀번호를
눈 모양을 누르면 보여줘요
이럴 때 써요
- 로그인할 때 비밀번호를 맞게 쳤는지 볼 때
- 와이파이 비밀번호 넣는 창
- 회원가입에서 새 비밀번호 정할 때
#비밀번호보기#PasswordToggle#눈아이콘#로그인화면
OTP input
숫자를 한 칸에 하나씩 넣으면
다음 칸으로 알아서 넘어가요
LOOP인증번호 6자리
문자로 받은 번호를 넣어요 · 02:58
✓ 인증됐어요
이럴 때 써요
- 문자로 받은 인증번호 6자리 넣을 때
- 간편결제 비밀번호 6자리
- 대시보드 관리자 로그인 2단계 인증
#인증번호입력칸#OTPInput#본인인증#회원가입
Checkbox
네모 칸을 누르면 ✓ 표시가 생겨요
여러 개를 한꺼번에 고를 수 있어요
이럴 때 써요
- 회원가입 약관 동의 화면
- 장바구니에서 살 상품만 고를 때
- 회의록 할 일 목록에서 끝낸 일 체크
#체크박스#Checkbox#여러개선택#약관동의
Radio button
동그라미 중에 딱 하나만 골라져요
다른 걸 누르면 앞의 건 풀려요
이럴 때 써요
- 배송 요청사항 '문 앞에 놔주세요' 고를 때
- 결제 수단 하나 고르기
- 설문지에서 하나만 답하는 문항
#라디오버튼#RadioButton#하나만선택#설문
Toggle switch
스위치를 누르면 동그라미가 옮겨가며
켜짐·꺼짐이 바로 바뀌어요
이럴 때 써요
- 휴대폰 설정에서 알림 켜고 끌 때
- 앱의 '다크 모드' 켜기
- 대시보드의 '자동 새로고침' 켜고 끄기
#토글스위치#ToggleSwitch#켜기끄기#설정화면
Select
칸을 누르면 목록이 펼쳐지고
하나를 고르면 칸에 쏙 들어가요
LOOP배송지
집· 서울 마포구✓
회사· 서울 강남구
부모님 댁· 대전 서구
이럴 때 써요
- 주문서에서 배송지 고를 때
- 회원가입의 '태어난 해' 고르기
- 대시보드에서 '이번 달·지난달' 기간 고를 때
#셀렉트#Select#목록선택#주문서
Autocomplete
몇 글자만 쳐도
나머지를 추천해서 보여줘요
이럴 때 써요
- 포털 검색창에 '부산'만 쳐도 '부산 맛집'
- 주소 검색에서 도로명 추천
- 쇼핑몰 검색창의 추천 검색어
#자동완성#Autocomplete#추천검색어#검색
Chip input
단어를 쓰고 Enter를 누르면
동글한 태그로 하나씩 쌓여요
이럴 때 써요
- 블로그 글에 해시태그 달 때
- 메일 받는 사람 여러 명 넣을 때
- 카드뉴스 키워드 태그 정리할 때
#칩입력#ChipInput#태그입력#해시태그
Range slider
막대 위 동그라미를 끌어서
원하는 범위를 정해요
LOOP가격
₩0 ~ ₩100,000
₩0
₩100,000
이럴 때 써요
- 쇼핑몰 가격 필터 '2만~6만 원'
- 부동산 앱에서 평수 범위 고를 때
- 대시보드에서 볼 기간을 좁힐 때
#레인지슬라이더#RangeSlider#범위선택#가격필터
Number stepper
−, + 버튼을 누를 때마다
숫자가 하나씩 줄고 늘어요
이럴 때 써요
- 장바구니에서 상품 수량 바꿀 때
- 숙소 예약에서 '성인 2명' 인원 정할 때
- 상세페이지 아래 구매 수량 칸
#수량스테퍼#NumberStepper#수량조절#장바구니
Date picker
칸을 누르면 달력이 펼쳐지고
날짜를 콕 누르면 들어가요
LOOP‹2026년 11월›
일월화수목금토
1234567
891011121314
15161718192021
22232425262728
2930
이럴 때 써요
- 숙소 예약의 체크인 날짜
- 병원·미용실 예약 날짜 고를 때
- 대시보드에서 보고 싶은 날짜 고를 때
#데이트피커#DatePicker#날짜선택#예약
File upload
점선 칸에 파일을 끌어다 놓으면
바로 올라가고 목록에 떠요
LOOP파일을 여기로 끌어다 놓으세요
PDF·JPG, 10MB까지
이럴 때 써요
- 입사지원서에 이력서 파일 붙일 때
- 관공서 신청서에 서류 낼 때
- 회의 자료 파일을 올려 정리할 때
#파일업로드#FileUpload#끌어다놓기#첨부파일
Star rating
별 위로 지나가면 미리 채워지고
누르면 그 개수로 점수가 정해져요
이럴 때 써요
- 배달앱 리뷰 남길 때
- 쇼핑몰 상품 후기 별점
- 강의·행사 끝나고 만족도 조사
#별점#StarRating#평점#리뷰