Input
Input (입력)
Input은 사람들이 짧고 자유 형식의 텍스트 데이터를 입력할 수 있게 해 줘요. 한 줄짜리 텍스트를 받는 가장 기본적인 입력 컴포넌트예요.
한 줄 이상의 정보를 수집해야 한다면 textarea를 시도해 보세요.
출처: Input 문서
본문
Behavior (동작)
Masks (마스크)
입력은 마스킹되거나 서식에 영향을 주는 커스텀 type 속성을 가질 수 있어요. 입력 마스킹은 특정 간격에 하이픈이 있는 전화번호처럼 사람들이 특정 형식으로 데이터를 입력하도록 돕는 점에서 플레이스홀더 텍스트처럼 작동할 수 있어요.
Fluent는 현재 마스킹된 입력에 커스텀 스타일을 적용하지 않으며, 일부 입력 유형은 Fluent의 디자인 언어와 맞지 않는 브라우저 기반 서식을 트리거할 수 있어요.
Layout (레이아웃)
입력은 독립적으로, 전체 폭 블록 요소로, 또는 텍스트와 함께 인라인으로 나타날 수 있어요. 입력의 폭은 사용자가 입력할 것으로 예상되는 콘텐츠의 대략적인 길이에 맞춰야 해요.
Accessibility (접근성)
필수 정보에는 플레이스홀더 텍스트를 사용하지 마세요. 플레이스홀더 텍스트를 포함한다면 반드시 라벨과 함께 사용하세요. 누군가 입력에 포커스를 맞추면 플레이스홀더는 사라져요. 프롬프트가 사라지면 인지 장애가 있는 사람을 포함해 일부 사람들이 정보를 입력하기 어려워질 수 있어요.
플레이스홀더 텍스트는 보조 기술을 위해 aria-label과 연결되어야 해요.
Content (콘텐츠)
Placeholder text (플레이스홀더 텍스트)
플레이스홀더 텍스트를 사용해 짧고 보충적인 힌트나 기대되는 입력 값의 형식 예시를 줄 수 있어요. 라벨만으로는 직관적이지 않을 때 데이터를 어떻게 입력해야 하는지 안내해야 해요. 예를 들어 검색 상자의 플레이스홀더 텍스트로 "Search for keywords, file names, or people" 같은 표현을 쓰는 식이에요.
플레이스홀더 텍스트에는 마침표를 쓰지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.
필수 정보에는 플레이스홀더 텍스트를 사용하지 마세요. 필수 정보는 항상 보이도록 라벨이나 입력 아래의 도움말 텍스트에 나타나야 해요. 플레이스홀더 텍스트를 포함한다면 반드시 라벨과 함께 사용하세요. 자세한 내용은 field 컴포넌트를 참고하세요.
더 알아보기 (Learn more)
- Input 스토리북 및 React/Web Components 가이드 확인
- 여러 줄 입력에는 textarea, 라벨·도움말 결합에는 field를 함께 참고하세요
- Microsoft Writing Style Guide: Periods