TextArea

여러 줄 텍스트 입력 컴포넌트는 긴 텍스트를 입력받는 폼 요소입니다.

기본 사용법

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';

export default function Preview() {
  return (
    <div className="max-w-md space-y-4">
      <TextField>
        <TextFieldTextarea
          placeholder="내용을 입력해주세요."
          rows={4}
          autoFocus
        />
      </TextField>
    </div>
  );
}

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';export default function Preview() {  return (    <div className="max-w-md space-y-4">      <TextField>        <TextFieldTextarea          placeholder="내용을 입력해주세요."          rows={4}          autoFocus        />      </TextField>    </div>  );}

Label

TextArea에 레이블을 추가할 수 있습니다.

레이블

'use client';

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';

export default function Label() {
  return (
    <div className="max-w-md space-y-4">
      <TextField label="레이블">
        <TextFieldTextarea placeholder="레이블이 있는 여러 줄 입력 필드" rows={4} />
      </TextField>
      <TextField>
        <TextFieldTextarea placeholder="레이블 없이 표시되는 여러 줄 입력 필드" rows={4} />
      </TextField>
    </div>
  );
}

'use client';import { TextField, TextFieldTextarea } from '@aift/ui/TextField';export default function Label() {  return (    <div className="max-w-md space-y-4">      <TextField label="레이블">        <TextFieldTextarea placeholder="레이블이 있는 여러 줄 입력 필드" rows={4} />      </TextField>      <TextField>        <TextFieldTextarea placeholder="레이블 없이 표시되는 여러 줄 입력 필드" rows={4} />      </TextField>    </div>  );}

Message

TextArea의 상태에 따라 메시지를 표시할 수 있습니다.

주의 메시지가 표시됩니다

오류 메시지가 표시됩니다

'use client';

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';

export default function Message() {
  return (
    <div className="max-w-md space-y-4">
      <TextField>
        <TextFieldTextarea placeholder="Enabled" rows={4} />
      </TextField>
      <TextField warn warnText="주의 메시지가 표시됩니다">
        <TextFieldTextarea placeholder="Warning" rows={4} />
      </TextField>
      <TextField error errorText="오류 메시지가 표시됩니다">
        <TextFieldTextarea placeholder="Error" rows={4} />
      </TextField>
    </div>
  );
}

'use client';import { TextField, TextFieldTextarea } from '@aift/ui/TextField';export default function Message() {  return (    <div className="max-w-md space-y-4">      <TextField>        <TextFieldTextarea placeholder="Enabled" rows={4} />      </TextField>      <TextField warn warnText="주의 메시지가 표시됩니다">        <TextFieldTextarea placeholder="Warning" rows={4} />      </TextField>      <TextField error errorText="오류 메시지가 표시됩니다">        <TextFieldTextarea placeholder="Error" rows={4} />      </TextField>    </div>  );}

Input

TextArea에 값을 입력할 수 있습니다.

Value1:

Value2: 기본 입력 값

'use client';

import { useState } from 'react';
import { TextField, TextFieldTextarea } from '@aift/ui/TextField';

export default function Input() {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('기본 입력 값');

  return (
    <div className="max-w-md space-y-4">
      <TextField value={value1} onValueChange={(value) => setValue1(value)}>
        <TextFieldTextarea placeholder="텍스트를 입력하세요" rows={4} />
      </TextField>
      <TextField value={value2} onValueChange={(value) => setValue2(value)}>
        <TextFieldTextarea placeholder="텍스트를 입력하세요" rows={4} />
      </TextField>
      <p>Value1: {value1}</p>
      <p>Value2: {value2}</p>
    </div>
  );
}

'use client';import { useState } from 'react';import { TextField, TextFieldTextarea } from '@aift/ui/TextField';export default function Input() {  const [value1, setValue1] = useState('');  const [value2, setValue2] = useState('기본 입력 값');  return (    <div className="max-w-md space-y-4">      <TextField value={value1} onValueChange={(value) => setValue1(value)}>        <TextFieldTextarea placeholder="텍스트를 입력하세요" rows={4} />      </TextField>      <TextField value={value2} onValueChange={(value) => setValue2(value)}>        <TextFieldTextarea placeholder="텍스트를 입력하세요" rows={4} />      </TextField>      <p>Value1: {value1}</p>      <p>Value2: {value2}</p>    </div>  );}

Disabled

TextArea를 비활성화할 수 있습니다.

'use client';

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';

export default function Disabled() {
  return (
    <div className="max-w-md space-y-4">
      <TextField>
        <TextFieldTextarea placeholder="입력 가능한 필드" rows={4} />
      </TextField>
      <TextField disabled>
        <TextFieldTextarea placeholder="입력 불가능한 필드" rows={4} />
      </TextField>
    </div>
  );
}

'use client';import { TextField, TextFieldTextarea } from '@aift/ui/TextField';export default function Disabled() {  return (    <div className="max-w-md space-y-4">      <TextField>        <TextFieldTextarea placeholder="입력 가능한 필드" rows={4} />      </TextField>      <TextField disabled>        <TextFieldTextarea placeholder="입력 불가능한 필드" rows={4} />      </TextField>    </div>  );}

Close Button

TextArea에 삭제 버튼을 추가할 수 있습니다.

'use client';

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';
import { useState } from 'react';

export default function ClearButton() {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');

  return (
    <div className="max-w-md space-y-4">
      <TextField value={value1} onValueChange={(value) => setValue1(value)}>
        <TextFieldTextarea
          placeholder="입력 후 삭제 버튼을 클릭하세요"
          rows={4}
        />
      </TextField>
      <TextField clearButton={false}>
        <TextFieldTextarea
          placeholder="삭제 버튼이 없는 입력 필드"
          rows={4}
        />
      </TextField>
    </div>
  );
}

'use client';import { TextField, TextFieldTextarea } from '@aift/ui/TextField';import { useState } from 'react';export default function ClearButton() {  const [value1, setValue1] = useState('');  const [value2, setValue2] = useState('');  return (    <div className="max-w-md space-y-4">      <TextField value={value1} onValueChange={(value) => setValue1(value)}>        <TextFieldTextarea          placeholder="입력 후 삭제 버튼을 클릭하세요"          rows={4}        />      </TextField>      <TextField clearButton={false}>        <TextFieldTextarea          placeholder="삭제 버튼이 없는 입력 필드"          rows={4}        />      </TextField>    </div>  );}

Color

TextArea의 배경색을 설정할 수 있습니다.

'use client';

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';

export default function Color() {
  return (
    <div className="max-w-md space-y-4">
      <TextField>
        <TextFieldTextarea placeholder="흰색 배경 입력 필드" rows={4} />
      </TextField>
      <TextField>
        <TextFieldTextarea placeholder="회색 배경 입력 필드" rows={4} />
      </TextField>
    </div>
  );
}

'use client';import { TextField, TextFieldTextarea } from '@aift/ui/TextField';export default function Color() {  return (    <div className="max-w-md space-y-4">      <TextField>        <TextFieldTextarea placeholder="흰색 배경 입력 필드" rows={4} />      </TextField>      <TextField>        <TextFieldTextarea placeholder="회색 배경 입력 필드" rows={4} />      </TextField>    </div>  );}

Resize

TextArea의 크기를 조정할 수 있습니다.

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';

export default function Resize() {
  return (
    <div className="max-w-md space-y-4">
      <TextField>
        <TextFieldTextarea
          placeholder="크기 조정 불가"
          rows={4}
          resize="none"
        />
      </TextField>
      <TextField>
        <TextFieldTextarea
          placeholder="수직 방향으로만 조정 가능"
          rows={4}
          resize="vertical"
        />
      </TextField>
      <TextField>
        <TextFieldTextarea
          placeholder="수평 방향으로만 조정 가능"
          rows={4}
          resize="horizontal"
        />
      </TextField>
      <TextField>
        <TextFieldTextarea
          placeholder="모든 방향으로 조정 가능"
          rows={4}
          resize="both"
        />
      </TextField>
    </div>
  );
}

import { TextField, TextFieldTextarea } from '@aift/ui/TextField';export default function Resize() {  return (    <div className="max-w-md space-y-4">      <TextField>        <TextFieldTextarea          placeholder="크기 조정 불가"          rows={4}          resize="none"        />      </TextField>      <TextField>        <TextFieldTextarea          placeholder="수직 방향으로만 조정 가능"          rows={4}          resize="vertical"        />      </TextField>      <TextField>        <TextFieldTextarea          placeholder="수평 방향으로만 조정 가능"          rows={4}          resize="horizontal"        />      </TextField>      <TextField>        <TextFieldTextarea          placeholder="모든 방향으로 조정 가능"          rows={4}          resize="both"        />      </TextField>    </div>  );}

React Hook Form

React Hook Form을 사용하여 폼을 관리할 수 있습니다.

'use client';

import { useController, useForm } from 'react-hook-form';
import { TextField, TextFieldTextarea } from '@aift/ui/TextField';
import { Button } from '@aift/ui/Button';
import { useState } from 'react';

interface FormData {
  address: string;
  description: string;
}

export default function ReactHookForm() {
  const { reset, handleSubmit, formState: { errors, isSubmitting }, control } = useForm<FormData>({
    mode: 'onSubmit',
    reValidateMode: 'onChange',
    defaultValues: {
      address: '',
      description: '',
    },
  });

  const { field: addressField } = useController({
    name: 'address',
    control: control,
    rules: {
      required: '이름은 필수 입력입니다.',
    },
  });

  const { field: descriptionField } = useController({
    name: 'description',
    control: control,
  });

  const [formValue, setFormValue] = useState<FormData>();

  const onSubmit = (data: FormData) => {
    setFormValue(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <TextField 
        required
        label="주소" 
        error={!!errors.address} 
        errorText={errors.address?.message as string}
        value={addressField.value}
        onValueChange={addressField.onChange}
        name={addressField.name}
        inputRef={addressField.ref}
        onBlur={addressField.onBlur}
      >
        <TextFieldTextarea placeholder="입력하세요" rows={4} autoFocus />
      </TextField>
      <TextField 
        required
        label="설명" 
        error={!!errors.description} 
        errorText={errors.description?.message as string}
        value={descriptionField.value}
        onValueChange={descriptionField.onChange}
        name={descriptionField.name}
        inputRef={descriptionField.ref}
        onBlur={descriptionField.onBlur}
      >
        <TextFieldTextarea placeholder="입력하세요" rows={4} />
      </TextField>
      <div className="flex gap-2">
        <Button type="button" variant="outlined" onClick={() => reset()}>초기화</Button>
        <Button type="submit" disabled={isSubmitting} variant="contained" color="primary">제출</Button>
      </div>

      {formValue && (
        <div className="space-y-2 mt-8">
          <p className="text-sm text-neutral-80 font-semibold">주소: {formValue.address}</p>
          <p className="text-sm text-neutral-80 font-semibold">설명: {formValue.description}</p>
        </div>
      )}
    </form>
  );
}

'use client';import { useController, useForm } from 'react-hook-form';import { TextField, TextFieldTextarea } from '@aift/ui/TextField';import { Button } from '@aift/ui/Button';import { useState } from 'react';interface FormData {  address: string;  description: string;}export default function ReactHookForm() {  const { reset, handleSubmit, formState: { errors, isSubmitting }, control } = useForm<FormData>({    mode: 'onSubmit',    reValidateMode: 'onChange',    defaultValues: {      address: '',      description: '',    },  });  const { field: addressField } = useController({    name: 'address',    control: control,    rules: {      required: '이름은 필수 입력입니다.',    },  });  const { field: descriptionField } = useController({    name: 'description',    control: control,  });  const [formValue, setFormValue] = useState<FormData>();  const onSubmit = (data: FormData) => {    setFormValue(data);  };  return (    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">      <TextField         required        label="주소"         error={!!errors.address}         errorText={errors.address?.message as string}        value={addressField.value}        onValueChange={addressField.onChange}        name={addressField.name}        inputRef={addressField.ref}        onBlur={addressField.onBlur}      >        <TextFieldTextarea placeholder="입력하세요" rows={4} autoFocus />      </TextField>      <TextField         required        label="설명"         error={!!errors.description}         errorText={errors.description?.message as string}        value={descriptionField.value}        onValueChange={descriptionField.onChange}        name={descriptionField.name}        inputRef={descriptionField.ref}        onBlur={descriptionField.onBlur}      >        <TextFieldTextarea placeholder="입력하세요" rows={4} />      </TextField>      <div className="flex gap-2">        <Button type="button" variant="outlined" onClick={() => reset()}>초기화</Button>        <Button type="submit" disabled={isSubmitting} variant="contained" color="primary">제출</Button>      </div>      {formValue && (        <div className="space-y-2 mt-8">          <p className="text-sm text-neutral-80 font-semibold">주소: {formValue.address}</p>          <p className="text-sm text-neutral-80 font-semibold">설명: {formValue.description}</p>        </div>      )}    </form>  );}

Props

`TextField`

Prop	Type	Default	Description
label	`string`	-	입력 필드의 레이블
value	`string`	-	입력 값
onChange	`(e: ChangeEvent<HTMLTextAreaElement>) => void`	-	값 변경 핸들러
disabled	`boolean`	`false`	비활성화 여부
error	`boolean`	`false`	에러 상태 (status='destructive')
errorText	`string`	-	에러 텍스트 (error 상태일 때 표시)
warn	`boolean`	`false`	경고 상태 (status='cautionary')
warnText	`string`	-	경고 텍스트 (warn 상태일 때 표시)
helperText	`string`	-	도움말 텍스트
size	`'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'extra'`	`'medium'`	입력 필드 크기
status	`'default' \| 'positive' \| 'cautionary' \| 'destructive' \| 'info'`	`'default'`	입력 필드 상태
required	`boolean`	`false`	필수 입력 여부
color	`'white' \| 'gray'`	`'white'`	배경색
variant	`'rounded' \| 'rectangled' \| 'plain'`	`'rounded'`	스타일 변형
radius	`'none' \| 'small' \| 'medium' \| 'large' \| 'extra' \| 'full'`	`'medium'`	테두리 반경
leftSlot	`ReactNode`	-	왼쪽 슬롯 (아이콘 등)
rightSlot	`ReactNode`	-	오른쪽 슬롯 (삭제 버튼 등)
className	`string`	-	추가 CSS 클래스
id	`string`	-	고유 ID
onValueChange	`(value: string) => void`	-	값 변경 핸들러 (문자열 값)
name	`string`	-	input 요소의 name 속성 (react-hook-form 등에서 사용)
inputRef	`Ref<HTMLTextAreaElement>`	-	input 요소의 ref (react-hook-form 등에서 사용)

`TextFieldTextarea`

Prop	Type	Default	Description
placeholder	`string`	-	플레이스홀더 텍스트
rows	`number`	-	표시할 행 수
resize	`'none' \| 'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	텍스트 영역 크기 조정 방향
autoFocus	`boolean`

TextArea

On this page