폼·입력

포인터로 숫자 노드를 이어 잠금 패턴을 입력하고 동일한 번호 시퀀스를 키보드 대안으로 지원한다.

터치·펜·포인터로 정규화된 서명 획을 남기고 실행 취소·지우기·확인을 수행한다. 이름 입력과 명시적 동의를 키보드 대안으로 제공한다.

이니셜 아바타·이름·직함·소개·시간대·공개 범위를 한곳에서 편집한다. 저장 전 변경 감지와 되돌리기, 로컬 저장 완료 상태를 명확히 구분한다.

비밀번호 상태, 패스키, 인증 앱을 이용한 2단계 인증, 일회용 복구 코드를 한곳에서 관리한다. 복구 코드 재생성과 열람 상태도 표시한다.

현재 기기와 다른 브라우저·위치·신뢰 상태를 검토하고 개별 또는 일괄 로그아웃한다. 현재 세션을 보호하면서 다른 세션이 사라진 빈 상태까지 제공한다.

외부 로그인·협업 제공자의 연결 상태와 사용자 식별자를 관리한다. 계정에 남은 마지막 로그인 수단은 해제하지 못하도록 이유와 함께 안전하게 제한한다.

Viewer·Editor·Admin이 리소스별로 수행할 수 있는 작업을 표로 비교하고 편집한다. 상속된 관리자 권한을 잠그고 모바일에서는 역할별 카드 보기로 전환한다.

계정 비활성화와 영구 삭제의 결과를 분리해 설명하고 인라인 확인 단계로 진행한다. 영구 삭제는 정확한 확인 문구를 입력해야만 완료된다.

계정·팀·목표를 세 단계로 나눠 입력하는 온보딩 흐름. 단계별 네이티브 검증과 진행 상태, 이전 이동, 완료 요약을 한 컴포넌트에 담는다.

프로젝트 유형을 고르면 현재 맥락에 필요한 후속 질문만 나타나는 브리프 폼. 불필요한 입력을 줄이면서 라디오·필드셋의 의미 구조를 유지한다.

Enter·쉼표로 항목을 칩으로 만들고 Backspace와 개별 버튼으로 제거하는 복수 입력. 중복·최대 개수를 제어하고 변경 결과를 라이브 영역으로 알린다.

입력 즉시 후보를 필터링하고 방향키·Home·End·Enter·Escape로 탐색하는 단일 선택기. 많은 옵션에서도 검색과 선택을 하나의 포커스 안에서 해결한다.

원·달러·유로 규칙에 맞춰 금액을 포맷하고 수수료와 실수령액을 즉시 계산하는 송금 입력. 통화별 소수점 자릿수와 숫자 입력 모드를 함께 처리한다.

6자리 숫자의 자동 이동·역방향 삭제·전체 붙여넣기와 재전송 타이머를 지원하는 인증 폼. 각 자리 레이블과 완료 상태를 보조 기술에도 전달한다.

도로명·지번·우편번호를 검색해 키보드로 결과를 선택하고 상세 주소 입력으로 이어지는 배송지 패턴. 데모는 외부 요청 없는 로컬 주소 데이터로 동작한다.

필드 유형을 추가하고 레이블·필수 여부·순서를 편집하면서 결과를 즉시 미리 보는 구성 도구. 드래그 없이 명시적인 이동 버튼으로 키보드 접근성을 확보한다.

입력 즉시 조합 조건과 강도 막대를 함께 갱신하는 비밀번호 필드. 보이기 전환과 조건별 완료 표시까지 한 컴포넌트에 담는다.

끌어놓기와 파일 선택을 모두 지원하는 업로드 진입점. 드롭 상태와 선택 완료 상태를 명확하게 구분해 파일 전송 전 피드백을 준다.

회사와 담당자 정보, 연락처, 해결할 업무 문제, 개인정보 동의를 한 장의 폼에서 받는다. 네이티브 검증과 제출 중·완료·오류 상태를 제공한다.

상담 안내와 이메일 링크를 왼쪽에 두고 상세 문의 폼을 오른쪽에 배치한다. 문의 유형과 유입 경로 선택, 네이티브 검증, 제출 상태를 제공한다.

이메일 주소를 받는 구독 폼. 브라우저의 이메일 입력 검증 결과를 화면에 표시하고 전송은 onSubmit으로 위임한다.

왼쪽 안내(이메일·전화·응답 시간) + 오른쪽 폼. 폼만 두면 "언제 답이 오나"를 몰라 이탈하므로 응답 약속과 대체 수단을 나란히 둔다. 동의 문구엔 원문 링크를 반드시 건다.

값이 있는 지점으로 트랙이 당겨져 휘어지는 range 입력. 상호작용과 접근성은 네이티브 input이 맡고 SVG는 탄력 있는 시각 피드백만 담당한다.

이메일과 비밀번호를 확인해 입력 오류를 알려 주고, 비밀번호 표시 전환과 간편 로그인 수단을 함께 제공한다. 이 기기에 저장한 계정 목록에서 이메일을 채워 넣을 수 있다.

설정마다 켜고 끄기, 값 선택, 상위 요금제 안내 중 맞는 조작을 오른쪽에 둔다. 물음표 버튼으로 설명을 펼치고 방금 바꾼 값도 함께 표시한다.

평소에는 시작일과 종료일만 한 줄로 보여주고, 누르면 두 달 달력을 펼쳐 기간을 고른다. 조회할 수 없는 날짜는 취소선으로 구분하고 방향키로도 날짜를 옮긴다.