텍스트 필드
텍스트 필드 (Text field)
텍스트 필드는 사용자가 짧고 자유로운 형식의 텍스트 데이터를 입력하게 해주는 요소예요.
텍스트 필드는 입력할 수 있는 텍스트의 양을 제한하지는 않아요. 다만 긴 텍스트를 수용하도록 반응하지도 않고요. 댓글처럼 긴 입력이 필요하다면 네이티브 텍스트 뷰를 써보세요.
출처: 문서
본문
동작 (Behavior)
포커스 힌트 (Focus hints)
휴식 상태에서 텍스트 필드는 중립적인 색을 사용해요. 필드가 선택되고 편집 가능해지면 필드가 브랜드 색으로 다시 칠해져서 포커스됐다는 시각적 표시가 돼요. 필드가 포커스되어 있는 동안에는 텍스트를 지우는 후행(trailing) 버튼이 바로 나타나요. 텍스트 필드에 입력이 들어오면 지우기 버튼은 필드가 더 이상 포커스되지 않아도 계속 남아 있어요. 반대로 입력이 없고 필드가 포커스를 잃으면 지우기 버튼은 사라지고요.
검증과 오류 (Validation and errors)
텍스트 필드는 각 문자를 입력한 뒤, 필드가 포커스를 잃었을 때, 또는 리턴 키를 눌렀을 때 입력을 검증하도록 설정할 수 있어요. 묻고 있는 데이터에 가장 잘 맞는 검증 유형을 선택하세요. 예를 들어 텍스트 필드가 특정 콘텐츠, 가령 비밀번호 요구사항이나 사용 가능한 사용자 이름 선택 같은 것을 기대한다면 오류를 즉시 표시하세요. 하지만 이메일을 입력할 때의 @처럼 기대하는 문자가 입력의 뒤쪽에 올 수 있는 경우에는, 필드가 포커스를 잃은 뒤 또는 리턴 키를 눌렀을 때 검증하는 게 좋아요.
오류가 있다면 선택적인 FluentTextInputError 객체를 사용해 무엇이 잘못됐는지 알려주세요. 그러면 필드의 시각적 스타일이 오류 상태를 반영하도록 바뀌고, 문제를 어떻게 해결할지 알려주는 메시지가 나타나요.
접근성 (Accessibility)
텍스트 필드 라벨 (Text field label)
라벨이 없는 텍스트 필드는 혼란스러울 수 있어요. 사용자가 무엇을 입력해야 하는지 확신하지 못하는 상황을 피하려면, 대부분의 경우 선택적인 텍스트 필드 라벨을 쓰는 게 좋아요.
콘텐츠 (Content)
라벨 (Labels)
라벨은 사용자에게 필드에 무엇을 넣어야 하는지 짧게 알려줘요. 보통 짧은 구절이 가장 잘 맞고, 라벨에 전체 문장이나 지시형 텍스트를 쓰지 마세요.
플레이스홀더 텍스트 (Placeholder text)
플레이스홀더 텍스트는 사용자가 무엇을 입력해야 하는지에 대한 추가 힌트로 사용해요. 예를 들어 "검색 키워드, 파일 이름, 또는 사람"은 "검색" 라벨을 확장해 설명해주죠.
꼭 필요한 정보를 플레이스홀더 텍스트에 넣지 마세요. 사용자가 자신의 입력을 시작하는 순간 사라지기 때문이에요. 또 플레이스홀더 텍스트에는 마침표를 생략하세요.
도움말 텍스트 (Helper text)
도움말 텍스트는 허용되는 값이나 요구되는 형식을 설명하는 데 사용해요. 예를 들어 "MM/DD/YYYY"는 날짜 입력에 요구되는 형식을 정의해주죠.