Motile UI

Textarea

여러 줄의 텍스트를 입력할 수 있는 Textarea 컴포넌트입니다. Floating label, 에러 상태, 글자 수 제한, 자동 높이 조절, 리사이즈 제어 등의 기능을 제공합니다.

미리보기

사용법

1"use client";
2
3import { useState } from "react";
4import { Textarea } from "motile-ui";
5
6type TextareaChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
8export default function PreviewExample() {
9  const [value, setValue] = useState("");
10
11  const handleChange: TextareaChangeHandler = (e) => {
12    setValue(e.target.value);
13  };
14
15  return (
16    <Textarea
17      placeholder="텍스트를 입력하세요..."
18      value={value}
19      onChange={handleChange}
20    />
21  );
22}

API 레퍼런스

Textarea

여러 줄 텍스트 입력 컴포넌트

속성타입기본값설명
labelstring-Floating label (포커스 또는 값이 있을 때 위로 이동)
placeholderstring-Placeholder 텍스트
valuestring-Textarea 값
isErrorbooleanfalse에러 상태
errorMessagestring-에러 메시지 (설정 시 자동으로 에러 상태로 표시)
disabledbooleanfalse비활성화 여부
maxLengthnumber-최대 글자 수 (입력 제한 및 카운터 표시)
rowsnumber4기본 행 수
resize"none" | "vertical" | "horizontal" | "both""none"리사이즈 방향 (none, vertical, horizontal, both)
autoSizeboolean | { minRows?: number; maxRows?: number }false콘텐츠에 따라 자동으로 높이 조절 (boolean 또는 minRows, maxRows 속성을 가진 객체)
colorstring-Textarea 테두리/포커스 색상
autoFocusbooleanfalse자동 포커스 여부
autoSelectbooleanfalse자동 텍스트 선택 여부 (autoFocus와 함께 사용)

기본 <code>textarea</code> HTML 속성을 모두 사용할 수 있습니다.

예제

Floating Label

1"use client";
2
3import { useState } from "react";
4import { Textarea } from "motile-ui";
5
6type TextareaChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
8export default function WithLabelExample() {
9  const [value, setValue] = useState("");
10
11  const handleChange: TextareaChangeHandler = (e) => {
12    setValue(e.target.value);
13  };
14
15  return (
16    <Textarea
17      label="메시지"
18      placeholder="메시지를 입력하세요"
19      value={value}
20      onChange={handleChange}
21    />
22  );
23}

에러 상태

1"use client";
2
3import { useState } from "react";
4import { Textarea, Button } from "motile-ui";
5
6type TextareaChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
8export default function WithErrorExample() {
9  const [value, setValue] = useState("");
10  const [error, setError] = useState("");
11
12  const handleChange: TextareaChangeHandler = (e) => {
13    setValue(e.target.value);
14    setError("");
15  };
16
17  const handleValidate = () => {
18    if (value.trim() === "") {
19      setError("내용을 입력해주세요");
20    } else if (value.length < 10) {
21      setError("최소 10자 이상 입력해주세요");
22    } else {
23      setError("");
24      alert("검증 성공!");
25    }
26  };
27
28  return (
29    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
30      <Textarea
31        label="자기소개"
32        placeholder="자기소개를 입력하세요"
33        value={value}
34        onChange={handleChange}
35        errorMessage={error}
36      />
37      <Button variant="primary" onClick={handleValidate}>
38        확인
39      </Button>
40    </div>
41  );
42}

글자 수 제한

0/500
1"use client";
2
3import { useState } from "react";
4import { Textarea } from "motile-ui";
5
6type TextareaChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
8export default function WithCounterExample() {
9  const [value, setValue] = useState("");
10
11  const handleChange: TextareaChangeHandler = (e) => {
12    setValue(e.target.value);
13  };
14
15  return (
16    <Textarea
17      label="소개"
18      placeholder="500자 이내로 작성하세요"
19      value={value}
20      onChange={handleChange}
21      maxLength={500}
22    />
23  );
24}

자동 높이 조절

1"use client";
2
3import { useState } from "react";
4import { Textarea } from "motile-ui";
5
6type TextareaChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
8export default function AutoSizeExample() {
9  const [value, setValue] = useState("");
10
11  const handleChange: TextareaChangeHandler = (e) => {
12    setValue(e.target.value);
13  };
14
15  return (
16    <Textarea
17      label="메시지"
18      placeholder="입력하면 자동으로 높이가 조절됩니다..."
19      value={value}
20      onChange={handleChange}
21      autoSize
22    />
23  );
24}

자동 높이 조절 (최대 줄 수 제한)

1"use client";
2
3import { useState } from "react";
4import { Textarea } from "motile-ui";
5
6type TextareaChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
8export default function AutoSizeWithLimitExample() {
9  const [value, setValue] = useState("");
10
11  const handleChange: TextareaChangeHandler = (e) => {
12    setValue(e.target.value);
13  };
14
15  return (
16    <Textarea
17      label="메시지"
18      placeholder="최대 6줄까지 자동으로 높이가 조절됩니다..."
19      value={value}
20      onChange={handleChange}
21      autoSize={{ minRows: 3, maxRows: 6 }}
22    />
23  );
24}

리사이즈 허용

1"use client";
2
3import { useState } from "react";
4import { Textarea } from "motile-ui";
5
6type TextareaChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
7
8export default function ResizeExample() {
9  const [value, setValue] = useState("");
10
11  const handleChange: TextareaChangeHandler = (e) => {
12    setValue(e.target.value);
13  };
14
15  return (
16    <Textarea
17      label="메모"
18      placeholder="드래그하여 크기를 조절할 수 있습니다..."
19      value={value}
20      onChange={handleChange}
21      resize="both"
22    />
23  );
24}

비활성화

1"use client";
2
3import { Textarea } from "motile-ui";
4
5export default function DisabledExample() {
6  return (
7    <Textarea
8      placeholder="비활성화된 Textarea"
9      value="이 Textarea는 비활성화되어 있습니다"
10      disabled
11    />
12  );
13}
Textarea | Motile UI