Textarea

Textarea (텍스트 영역)

여러 줄의 텍스트를 입력받는 컴포넌트예요. 긴 문장이나 문서 내용을 입력할 때 유용해요.

출처: 문서

본문

Textarea는 여러 줄의 텍스트를 입력받는 컴포넌트예요. <ExampleTabs name="textarea-basic" />

사용법 (Usage)

import { Textarea } from "@chakra-ui/react"

<Textarea placeholder="..." />

예시 (Examples)

변형 (Variants)

variant prop으로 텍스트 영역의 외형을 바꿀 수 있어요.

크기 (Sizes)

size prop으로 텍스트 영역의 크기를 바꿀 수 있어요.

도움말 텍스트 (Helper Text)

텍스트 영역을 Field 컴포넌트와 짝지어 도움말 텍스트를 추가할 수 있어요.

오류 텍스트 (Error Text)

텍스트 영역을 Field 컴포넌트와 짝지어 오류 텍스트를 추가할 수 있어요.

필드 (Field)

텍스트 영역을 Field 컴포넌트와 조합해 라벨, 도움말 텍스트, 오류 텍스트를 추가할 수 있어요.

Hook Form

react-hook-form과 텍스트 영역을 통합하는 예시예요.

크기 조절 (Resize)

resize prop으로 텍스트 영역의 크기 조절 동작을 제어할 수 있어요.

최대 높이(또는 행 수)를 제한하려면 maxHeight prop에 lh 단위 값을 설정하는 것을 권장해요.

<Textarea autoresize maxH="5lh" />

자동 크기 조절 (Autoresize)

autoresize prop으로 입력하면서 텍스트 영역이 세로로 자동으로 커지게 할 수 있어요.

Ref

기본 요소의 참조에 접근하는 방법이에요.

const Demo = () => {
  const ref = useRef<HTMLTextAreaElement | null>(null)
  return <Textarea ref={ref} />
}

Props

Textarea 컴포넌트의 Textarea 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.