Textarea

Textarea (텍스트 영역)

텍스트 영역은 댓글처럼 길고 자유로운 형식의 텍스트 데이터를 사람들이 입력하게 해 주는 요소예요. 여러 줄의 텍스트를 작성할 수 있는 입력 칸이라고 생각하면 쉬워요.

한 줄의 정보만 입력하면 되는 상황이라면 input을 대신 사용해 보세요.

출처: React Textarea 문서

본문

Behavior (동작)

기본적으로 텍스트 영역은 크기를 조절할 수 없어요. 넘치는 콘텐츠가 있으면 텍스트 영역은 스크롤돼요. 선택적으로 resize prop의 값을 바꿔서 사람들이 텍스트 영역의 크기와 한 번에 보는 정보량을 조절하게 할 수 있어요.

Textarea behavior

Layout (레이아웃)

텍스트 영역의 크기는 사람들이 입력할 것으로 예상되는 콘텐츠의 대략적인 양에 맞춰야 해요.

Accessibility (접근성)

사람들이 텍스트 영역을 완성하는 데 필요한 핵심 정보에는 텍스트 영역에 placeholder 텍스트를 사용하지 마세요. placeholder 텍스트를 포함한다면 반드시 라벨과 함께 사용하세요. 누군가 입력 박스에 포커스하면 placeholder가 사라지는데, 그 프롬프트가 사라지면 인지 장애가 있는 사람을 포함한 일부 사람들이 정보를 입력하기 어려워질 수 있어요.

placeholder 텍스트는 보조 기술을 위해 aria-label과 연결되어야 해요.

Include a label and use the placeholder to reinforce it

라벨을 포함하고 placeholder로 이를 보강하세요

Don't put too much information in the placeholder

placeholder에 너무 많은 정보를 넣지 마세요

Content (콘텐츠)

Placeholder text (placeholder 텍스트)

placeholder 텍스트로 짧고 보조적인 힌트나 예상 입력 값의 형식 예시를 줄 수 있어요. 라벨만으로 직관적이지 않을 때 사람들이 데이터를 어떻게 제공할지 안내해야 해요. 예를 들어 채팅 박스에 "Type a new message" 같은 placeholder 텍스트를 쓰는 경우예요.

placeholder 텍스트에는 마침표를 생략하세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.

Placeholder example

핵심 정보에는 placeholder 텍스트를 사용하지 마세요. 핵심 정보는 항상 보이도록 라벨이나 텍스트 영역 아래의 도움말 텍스트(helper text)에 있어야 해요. placeholder 텍스트를 포함한다면 반드시 라벨과 함께 사용하세요. 자세한 내용은 field 컴포넌트를 참고하세요.

Textarea content

더 알아보기 (Learn more)