컴포넌트 플레이그라운드

민원 신청서

텍스트 입력 필드, 셀렉트, 날짜 입력 필드, 텍스트 영역, 라디오 버튼, 파일 업로드, 체크박스, 토글 스위치로 만든 신청서입니다. 비워 둔 채 신청하면 오류 상태를 볼 수 있습니다.

긴급 공지

재난·장애처럼 반드시 알려야 하는 소식을 페이지 상단에 표시합니다.

신청 진행 단계

단계 표시기로 신청 절차의 현재 위치를 알려 줍니다.

1. 1단계신청
2. 현재단계2단계서류 검토
3. 3단계처리
4. 4단계완료

처리 상태와 검색 조건

배지로 상태를, 태그로 선택한 검색 조건을 보여 줍니다. 태그의 삭제 버튼으로 조건을 지우면 스낵바가 나타나고, 되돌리기로 다시 넣을 수 있습니다.

불러오는 중

스피너로 처리 중임을 알리고, 끝나면 토스트로 결과를 알립니다.

툴팁과 맥락적 도움말

입력 항목 옆에서 짧은 설명(툴팁)이나 조금 긴 안내(맥락적 도움말)를 제공합니다.

전입신고 따라하기

코치마크로 처음 쓰는 사람에게 화면의 순서를 안내합니다.

음성 지원

안내문을 음성으로 읽어 줍니다.

모달과 도움 패널

모달로 약관 같은 긴 내용을 보여 주고, 화면 오른쪽의 도움말 버튼으로 도움 패널을 엽니다.

맞춤 서비스

구조화 목록으로 서비스를 카드 형태로 보여 줍니다.

민원 처리 현황

표로 여러 건의 정보를 비교해 보여 줍니다. 처리 상태 열은 셀 슬롯(#cell-status)으로 배지를 넣었습니다.

자주 묻는 질문

아코디언으로 질문을 눌렀을 때만 답변을 펼칩니다.

구비 서류

디스클로저로 부가 안내를 접어 두고, 텍스트 목록으로 항목을 나열합니다.

1. 1. 신분증 (주민등록증, 운전면허증, 여권 중 1개)
2. 2. 임대차 계약서 사본
   • 확정일자를 받은 경우 함께 제출
3. 3. 위임장 (대리인이 신청하는 경우)

알림 게시판

탭으로 게시판을 나누고, 페이지네이션으로 목록을 나눠 보여 줍니다.

버튼

화면의 주요 행동에는 primary를 한 번만 쓰고, 나머지는 secondary·tertiary로 위계를 나눕니다.

링크

본문 안 링크와 새 창 링크를 구분해 표시합니다.