폼

폼은 사용자가 값을 이해하고 입력하고 오류를 수정해 작업을 완료하도록 안내하는 흐름입니다. 필드 자체뿐 아니라 레이블, 도움말, 검증 시점, 제출 결과를 하나의 경험으로 설계합니다.

컴포넌트 목록

컴포넌트	사용 목적	사용 시점과 주의사항
Form Layout	레이블, 필드, 도움말, 오류와 액션 배치	여러 필드의 정렬과 읽기 순서를 통일할 때 사용합니다. 필수 여부와 그룹 관계를 일관되게 표시합니다.
Input	이름, 이메일, 검색어 등 한 줄 텍스트 입력	자유로운 짧은 값을 받을 때 사용합니다. 입력 형식과 자동완성 속성을 실제 데이터 의미에 맞게 지정합니다.
Textarea	설명, 의견처럼 여러 줄 텍스트 입력	길이가 가변적인 문장을 받을 때 사용합니다. 글자 수 제한이 있다면 현재 값과 제한을 함께 알립니다.
Select	제한된 선택지 중 하나 선택	선택지가 비교적 많고 공간이 제한될 때 사용합니다. 자주 비교해야 하는 소수 항목은 Radio가 더 적합합니다.
Checkbox	여러 독립 항목 선택 또는 약관 동의	각 항목을 개별적으로 켜고 끌 수 있을 때 사용합니다. 상위 전체 선택은 일부 선택 상태를 명확히 표시합니다.
Radio	상호 배타적인 항목 중 하나 선택	모든 선택지를 동시에 보고 비교해야 할 때 사용합니다. 기본값이 없다면 미선택 상태를 의도적으로 처리합니다.
Switch	저장 버튼 없이 즉시 적용되는 켜기·끄기 상태	설정 변경이 즉시 반영되고 되돌리기 쉬울 때 사용합니다. 제출 시 반영되는 값에는 Checkbox가 적합합니다.
Slider	범위 안의 연속 값 또는 단계 값 선택	정밀한 숫자 입력보다 상대적인 조절이 중요할 때 사용합니다. 현재 값과 키보드 조작을 함께 제공합니다.
DatePicker	날짜, 시간 또는 기간 선택	달력 확인이 입력을 돕는 경우 사용합니다. 키보드 직접 입력, 형식 안내, 허용 범위를 함께 지원합니다.
Rate	별점 등 단계형 평가 값 선택	주관적인 등급을 빠르게 선택할 때 사용합니다. 아이콘의 의미와 현재 값을 텍스트로도 전달합니다.
Upload	파일 선택, 전송 진행과 결과 표시	파일 형식·용량 제한, 업로드 진행, 실패 원인과 재시도 방법을 선택 전에 안내합니다.

선택 기준

자유 입력은 Input·Textarea, 단일 선택은 Select·Radio, 복수 선택은 Checkbox를 기준으로 선택합니다. Switch는 폼 제출값이 아니라 즉시 바뀌는 설정에만 사용합니다. 날짜나 범위처럼 전용 UI가 입력 오류를 줄일 때 DatePicker와 Slider를 사용하되 직접 입력 경로도 고려합니다.

검증과 제출

• 레이블은 placeholder로 대체하지 않고 각 필드와 프로그램 방식으로 연결합니다.
• 오류는 제출 후 한꺼번에만 보여주지 말고 적절한 시점에 필드 가까이에서 원인과 해결 방법을 설명합니다.
• 오류가 발생해도 사용자가 입력한 값을 보존하고 첫 오류로 포커스를 안내합니다.
• 제출 버튼은 처리 중 상태를 알리고 중복 제출을 막으며 성공·실패 결과를 명확히 제공합니다.
• disabled와 readonly는 목적이 다릅니다. 수정만 막고 값을 전달해야 한다면 readonly 가능 여부를 우선 검토합니다.