Label
Label (라벨)
Label은 컴포넌트나 컴포넌트 그룹에 이름을 붙여줘요. 체크박스나 입력 같은 컴포넌트와 함께 사용해 특정 정보를 입력하도록 안내하거나, 일반 텍스트와 함께 사용해 정보를 분류할 수 있어요.
라벨을 폼 컴포넌트와 함께 사용해 정보를 수집할 때는 별표(asterisk)로 진행 전에 해당 정보가 필수인지 표시하세요.
출처: Label 문서
본문
Behavior (동작)
Disabled states (비활성화 상태)
라벨은 rest 상태 외에도, 이름을 붙이는 컴포넌트가 비활성화되어 있다면 비활성화 상태를 표시할 수 있어요. 이는 switch, checkbox, radio group처럼 라벨이 내장된 컴포넌트에서 흔해요.
비활성화 상태에서는 라벨이 색상 대비(color contrast) 요구사항을 충족할 필요가 없어요.
Label wrapping (라벨 줄바꿈)
라벨이 컨테이너보다 길면 텍스트는 다음 줄로 줄바꿈돼요. 라벨은 절대 잘리지(truncate) 않아요.
Layout (레이아웃)
일반적으로 라벨은 컴포넌트 위에 두어야 해요. 하지만 레이아웃이 허용하면 인라인으로 나타날 수도 있어요.
Accessibility (접근성)
라벨 대신 플레이스홀더 텍스트를 사용하지 마세요.
Content (콘텐츠)
라벨은 찾는 정보를 간략하게 설명해야 해요. 보통 짧은 문구가 가장 좋아요. 어떤 경우에는 질문 형식이 필요하지만, 그 외에는 완전한 문장이나 지시문 텍스트를 피하세요.
문장형 대문자 표기(sentence style capitalization)를 사용하세요 — 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization를 참고하세요.
라벨이 질문을 이루지 않는다면 끝 문장 부호를 쓰지 마세요. 라벨 뒤에 콜론을 쓰지 마세요.
더 알아보기 (Learn more)
- Label 스토리북 및 React/Web Components 가이드 확인
- Microsoft Writing Style Guide: Capitalization