Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Textarea

텍스트를 입력할 수 있는 입력 컴포넌트입니다.

import { Textarea } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

긴 텍스트를 입력할 때.

사용예제

Basic Usage

기본적인 사용 방법입니다.

Disabled

disabled 속성을 추가하면 입력 필드가 비활성화됩니다.

0/120

Max Length

최대 입력 길이를 설정할 수 있습니다.

Underline

밑줄 스타일의 입력 필드입니다.

rounded

square

Shape

입력 필드의 모서리 모양을 설정할 수 있습니다.

import React, { useState } from 'react';
import { Textarea, Radio, Card } from 'sud-ui';

const ShapeTextarea = () => {
  const [shape, setShape] = useState('rounded');
  const [shapeValue, setShapeValue] = useState('');
  
  const shapeOptions = [
    { label: 'rounded', value: 'rounded' },
    { label: 'square', value: 'square' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={shapeOptions}
            direction="horizontal"
            value={shape}
            onChange={setShape}
          />
        </div>
      </Card>
      <Textarea
        shape={shape}
        value={shapeValue}
        onChange={(e) => setShapeValue(e.target.value)}
        placeholder={`${shape} Shape Textarea`}
      />
    </div>
  );
};

export default ShapeTextarea;

Resizable

크기 조절 가능한 입력 필드입니다.

Bottom Addon

하단에 추가 요소를 표시할 수 있습니다.

import React, { useState } from 'react';
import { Textarea, Button } from 'sud-ui';
import { PieChartOutline, Chat } from 'sud-icons';

const BottomAddonTextarea = () => {
  const [value, setValue] = useState("");

  return (
    <Textarea
      placeholder="Bottom Button Area Textarea"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      autoSize
      bottomLeft={
        <Button size="sm" colorType="cool-gray">
          Cancel
        </Button>
      }
      bottomRight={
        <div style={{ display: "flex", gap: 6 }}>
          <Button size="sm" icon={<PieChartOutline size={16} />} />
          <Button size="sm" icon={<Chat size={16} />} colorType="primary">
            Send
          </Button>
        </div>
      }
    />
  );
};

export default BottomAddonTextarea;

Size

Textarea 의 크기를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Textarea, Radio, Card } from 'sud-ui';

const SizeTextarea = () => {
  const [size, setSize] = useState('md');
  const [value, setValue] = useState('');
  
  const sizeOptions = [
    { label: 'sm', value: 'sm' },
    { label: 'md', value: 'md' },
    { label: 'lg', value: 'lg' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={sizeOptions}
            direction="horizontal"
            value={size}
            onChange={setSize}
          />
        </div>
      </Card>
      <Textarea
        size={size}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={`${size} size Textarea`}  
      />
    </div>
  );
};

export default SizeTextarea;

Read Only

readOnly 속성을 추가하면 입력 필드가 읽기 전용으로 변경됩니다.

Introduction

Label

label 속성을 추가하면 입력 필드의 라벨을 설정할 수 있습니다.

Error State

에러 상태와 메시지를 표시할 수 있습니다.

import React, { useState } from 'react';
import { Textarea } from 'sud-ui';

const ErrorTextarea = () => {
  const [value, setValue] = useState("");

  return (
    <Textarea
      value={value}
      onChange={(e) => setValue(e.target.value)}
      error={value.length > 0}
      errorText="Error Message"
      placeholder="Error Textarea"
    />
  );
};

export default ErrorTextarea;

Color Customization

입력 필드의 색상을 커스텀할 수 있습니다.

import React, { useState } from 'react';
import { Textarea } from 'sud-ui';

const CustomColorTextarea = () => {
  const [value, setValue] = useState("");

  return (
    <Textarea
      placeholder="Enter text here"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      color="orange-8"
      background="orange-1"
      borderColor="orange-8"
    />
  );
};

export default CustomColorTextarea;

Auto Size

자동 크기 조절 가능한 입력 필드입니다.

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

value

입력 필드의 값

string

onChange

값이 변경될 때 호출되는 함수

(e: { target: { value: string } }) => void

placeholder

입력 필드의 placeholder 텍스트

string

size

입력 필드의 크기

shape

입력 필드의 모서리 모양

square

circle

rounded

capsule

rounded

disabled

입력 필드 비활성화 여부

boolean

false

readOnly

읽기 전용 여부

boolean

false

autoFocus

자동 포커스 여부

boolean

false

spellCheck

맞춤법 검사 여부

boolean

maxLength

최대 입력 길이

number

label

입력 필드의 라벨

string | ReactNode

underline

밑줄 스타일 여부

boolean

false

error

에러 상태 여부

boolean

false

errorText

에러 메시지

string

rows

기본 행 수

number

resizable

크기 조절 가능 여부

boolean

false

autoSize

자동 크기 조절 여부

boolean

false

bottomLeft

하단 왼쪽 요소

ReactNode

bottomRight

하단 오른쪽 요소

ReactNode

background

배경색(palette값 또는 HEX code)

string

color

텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

true

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

shadow

그림자 크기

none

className

추가 클래스명

string

style

추가 스타일

React.CSSProperties

{}

개인정보 처리방침

서비스 약관