텍스트 입력, 옵션 선택 입력에 대한 패턴입니다.
Text input
입력 텍스트 양을 한 줄 이내로 제한하려면 텍스트 입력 폼을 사용합니다. 특정 형식의 데이터를 입력해야 하는 경우에는 숫자, 이메일, 패스워드 등 해당하는 입력 폼 형식을 사용합니다.
Pattern
가독성과 명확성을 위해 레이블은 반드시 제공합니다. 전체 양식의 맥락에 맞도록 레이블링을 하고 폼 좌측 상단에 배치합니다.
많은 입력 폼을 제공하여 수직 공간을 줄일 필요가 있는 경우에는 레이블링을 폼 좌측에 수평이 되도록 배치하여 사용할 수 있습니다. 동일 양식 내 각 폼의 레이블은 모두 동일한 위치에 배치해야 합니다.
연관 그룹화가 가능한 입력 폼은 수평 배치를 할 수 있습니다. 최대 5개 폼까지 수평 배치를 할 수 있습니다.
레이블은 반드시 폼 좌측 상단에 위치합니다.
레이블 텍스트 크기와 입력 텍스트 크기 사이에 시각적 계층을 만들 수 있도록 텍스트 크기를 설정합니다. 영역이 제한된 곳에 입력 폼을 사용할 경우에는 더 작은 입력 텍스트 크기를 사용할 수 있습니다.
도움말을 제공해야 할 때는 레이블 옆에 info 아이콘과 툴팁을 사용합니다.
오류 메시지는 폼 하단에 표시하며 폼의 너비를 넘지 않도록 작성합니다.
Related
Selection input
제한된 수의 옵션 중에서 단일 옵션을 선택하는 패턴입니다.
Pattern
두 개의 값 중에서 하나만 선택할 때 한 개의 체크박스로 사용합니다. On/off, true/false 등 불린(Boolean) 속성의 입력이 필요할 때 사용합니다.
토글은 체크박스와 마찬가지로 불린 속성의 입력을 위해 사용합니다. 체크박스와 유사하지만, 토글은 입력과 동시에 화면에 변경 내용이 적용됩니다.
여러 개의 옵션 중에 하나만 선택해야 할 때는 라디오 버튼 그룹을 사용합니다. 보통 옵션이 3~5개 일 때 사용하며 모든 옵션을 한 눈에 볼 수 있도록 제공해야 합니다.
Related
