Field
Field (필드)
Field는 라벨과 입력(input)이나 select 같은 폼 컴포넌트의 조합이에요. 선택적으로 정보 버튼, 도움말 텍스트, 검증 상태(validation state)도 추가해서 사람들이 입력해야 할 정보에 대한 힌트를 줄 수 있어요. 폼의 한 "칸"을 통째로 담당하는 컴포넌트라고 보면 돼요.
출처: Field 문서
본문
Types (유형)
Field는 정보 입력을 요청하는 모든 컴포넌트와 함께 사용할 수 있어요. 어떤 유형의 필드가 자신의 사용 사례에 가장 좋은지는 다음 페이지들을 참고하세요: Checkbox, Combobox, Input, Radio group, Select, Slider, Spin button, Switch, Textarea의 각 Usage guidance.
Behavior (동작)
Validation (검증)
Field는 검증 후 인라인 피드백을 지원하도록 스타일이 내장되어 있어요. 검증 상태는 필드의 시각적 표현을 바꾸는데, 예를 들어 오류 상태에서 빨간 테두리로 바뀌는 식이에요.
검증 상태는 사람들을 어떻게 진행해야 하는지 안내하는 검증 메시지를 표시할 수도 있어요. validationMessage prop으로 상태를 설명하는 메시지를 표시하세요. 검증 메시지에는 기본 아이콘이 있지만 validationMessageIcon으로 기본 아이콘을 재정의할 수 있어요.
Success (성공) / Warning (경고) / Error (오류)
Required entries (필수 항목)
사람들이 진행하기 전에 필드를 채워야 한다는 것을 알려주려면 required prop을 사용하세요. 시각적으로는 라벨 옆에 빨간 별표가 표시되고, 스크린 리더도 해당 필드를 필수로 알려줘요.
모든 필드가 필수인 폼에서는 모든 필드에 required prop을 추가할 필요는 없어요. 대신 폼 시작 전에 모든 필드가 필수라는 일반 지침을 넣어 보세요. 사용자 이름과 비밀번호처럼 두 개의 필드만 있는 로그인/가입 폼이라면 필수 표시가 필요 없어요.
모든 필드가 완료될 때까지 Save나 Submit 버튼을 비활성화해 두면 모든 필드가 필수라는 추가 신호를 줄 수 있어요.
Disabled fields (비활성화된 필드)
필드가 비활성화되면 폼 컴포넌트만 비활성화된 것처럼 보여요. 라벨은 보조 기술을 사용하는 사람들이 여전히 인지할 수 있도록 활성 상태를 유지해요. 폼 컴포넌트가 비활성화되기 전에 나타났던 도움말 텍스트나 검증 텍스트도 활성 상태로 유지돼요.
Layout (레이아웃)
기본적으로 필드 라벨은 폼 컴포넌트 위에 상단 정렬돼요. 이 레이아웃은 페이지를 빠르게 훑어보고 정보를 입력하기에 가장 좋아요.
선택적으로 공간이 제한되고 필드 유형과 폭이 일관되다면 라벨을 왼쪽 정렬할 수 있어요. 라벨을 왼쪽 정렬하면 가독성이 떨어질 수 있으니 주의하세요.
Vertical alignment (세로 정렬) / Horizontal alignment (가로 정렬)
Accessibility (접근성)
필드를 완성하는 데 필요한 필수 정보에는 플레이스홀더 텍스트를 사용하지 마세요. 플레이스홀더 텍스트를 포함한다면 반드시 라벨과 함께 사용하세요. 누군가 입력에 포커스를 맞추면 플레이스홀더는 사라져요. 프롬프트가 사라지면 인지 장애가 있는 사람을 포함해 일부 사람들이 정보를 입력하기 어려워질 수 있어요.
플레이스홀더 텍스트는 보조 기술을 위해 aria-label과 연결되어야 해요.
Content (콘텐츠)
Labels (라벨)
라벨은 필드에 무엇이 들어가는지 간략하게 설명해요. 보통 짧은 문구가 가장 좋아요. 어떤 경우에는 질문 형식이 필요하지만, 그 외에는 완전한 문장이나 지시문 텍스트를 피하세요.
문장형 대문자 표기(sentence style capitalization)를 사용하세요 — 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization를 참고하세요.
Placeholder text (플레이스홀더 텍스트)
입력과 textarea처럼 텍스트 입력을 받는 필드에서는 필수 정보에 플레이스홀더 텍스트를 사용하지 마세요. 필수 정보는 항상 보이도록 라벨이나 필드 아래의 도움말 텍스트에 나타나야 해요.
대신 플레이스홀더 텍스트는 짧고 보충적인 힌트나 기대되는 값에 대한 설명에 사용하세요. 필드 라벨만으로는 직관적이지 않을 때 어떻게 채워야 하는지 안내해야 해요. 예를 들어 검색 상자의 플레이스홀더 텍스트로 "Search for keywords, file names, or people" 같은 표현을 쓰는 식이에요.
플레이스홀더 텍스트에는 마침표를 쓰지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.
Helper text (도움말 텍스트)
도움말 텍스트는 필드 아래에 위치하며 사람들이 올바르게 채우는 방법을 안내해요. 허용되는 값이나 필요한 형식을 설명할 때 도움말 텍스트를 사용하세요.
필드의 요구사항을 설명하기 위해 여러 문장이 필요하다면 불릿 목록으로 나열하는 것을 고려하세요.
도움말 텍스트에는 마침표를 쓰지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.
Validation messages (검증 메시지)
사용자의 입력이 유효하지 않을 때 어떻게 진행해야 하는지 안내하거나 입력이 유효함을 확인하려면 검증 메시지를 사용하세요. 메시지를 간결하게 유지하고 여러 문장이 필요하지 않다면 끝 문장 부호를 넣지 마세요.
Success (성공) / Warning (경고) / Error (오류)
더 알아보기 (Learn more)
- Field 스토리북 및 React/Web Components 가이드 확인
- Checkbox, Combobox, Input, Radio group, Select, Slider, Spin button, Switch, Textarea의 Usage guidance 함께 참고
- Microsoft Writing Style Guide: Capitalization, Periods