TextArea

Data Input

여러 줄 텍스트를 입력받는 필드.

Usage

여러 줄 텍스트 입력(메모·사유·설명). 한 줄이면 Input

import

import { TextArea } from '@mildang/design-system/TextArea';

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

API Reference

TextArea Props

Prop

Type

Default

cacheMeasurements

boolean

지정 안 함

className

string

지정 안 함

endAdornment

ReactNode

지정 안 함

error

boolean

false

maxRows

number

지정 안 함

minRows

number

지정 안 함

onHeightChange

(height: number, meta: TextareaHeightChangeMeta) => void

지정 안 함

size

"sm" | "md" | "lg" | "xl"

success

boolean

false

textAreaContainerClassName

string

지정 안 함

warning

boolean

false

예제

기본 사용

minRows 로 최소 높이를 준 여러 줄 입력 — 내용이 늘면 높이가 따라 늘어납니다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { TextArea } from '@mildang/design-system/TextArea';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    placeholder: 'Enter description...',
    size: 'md',
  }) } as ComponentProps<typeof TextArea>;

const TextAreaDemoExampleRender = (args: ComponentProps<typeof TextArea>) => <TextArea {...args} />;

export default function TextAreaDemoExample(props: Partial<ComponentProps<typeof TextArea>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof TextArea>;
  return TextAreaDemoExampleRender(mergedProps);
}

크기

sm·md·lg·xl 의 글자 크기와 여백을 비교합니다. minRows 는 크기와 별개로 줄 수를 정합니다.

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { TextArea } from '@mildang/design-system/TextArea';

const TextAreaSizesExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '400px' }}>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          sm
        </Text>
        <TextArea size="sm" placeholder="Small" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          md (default)
        </Text>
        <TextArea size="md" placeholder="Medium" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          lg
        </Text>
        <TextArea size="lg" placeholder="Large" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          xl
        </Text>
        <TextArea size="xl" placeholder="Extra Large" />
      </div>
    </div>
  );

export default TextAreaSizesExample;

상태

기본·오류·비활성을 나란히 둡니다. 글자 수 제한처럼 사유가 필요한 오류는 HelpText 와 함께 씁니다.

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { TextArea } from '@mildang/design-system/TextArea';

const TextAreaDisabledWithStatusExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Disabled (default)
        </Text>
        <TextArea disabled placeholder="Placeholder" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Disabled (with value)
        </Text>
        <TextArea disabled defaultValue="입력된 텍스트" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Disabled + Error
        </Text>
        <TextArea disabled error defaultValue="에러 상태에서 비활성화" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Disabled + Warning
        </Text>
        <TextArea disabled warning defaultValue="경고 상태에서 비활성화" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Disabled + Success
        </Text>
        <TextArea disabled success defaultValue="성공 상태에서 비활성화" />
      </div>
    </div>
  );

export default TextAreaDisabledWithStatusExample;

StatusGuide

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { TextArea } from '@mildang/design-system/TextArea';

const TextAreaStatusGuideExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Default
        </Text>
        <TextArea placeholder="Default state" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Error
        </Text>
        <TextArea error placeholder="Error state" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Warning
        </Text>
        <TextArea warning placeholder="Warning state" />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          Success
        </Text>
        <TextArea success placeholder="Success state" />
      </div>
    </div>
  );

export default TextAreaStatusGuideExample;

WidthGuide

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { TextArea } from '@mildang/design-system/TextArea';

const TextAreaWidthGuideExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          부모에 minWidth/maxWidth 설정 (반응형)
        </Text>
        <div style={{ minWidth: '200px', maxWidth: '500px' }}>
          <TextArea placeholder="반응형 너비 (200px ~ 500px)" />
        </div>
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          부모에 width 고정 (320px)
        </Text>
        <div style={{ width: '320px' }}>
          <TextArea placeholder="고정 너비 320px" />
        </div>
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          기본 (부모 너비 100%)
        </Text>
        <TextArea placeholder="부모 너비를 100% 채움" />
      </div>
    </div>
  );

export default TextAreaWidthGuideExample;

EndAdornmentSizes

코드

Open in Playground

import { Text } from '@mildang/design-system/Text';
import { TextArea } from '@mildang/design-system/TextArea';
import { IconButton } from '@mildang/design-system/IconButton';
import Calendar from '@mildang/icons/react/calendar';

const TextAreaEndAdornmentSizesExample = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '400px' }}>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          sm
        </Text>
        <TextArea
          size="sm"
          placeholder="Small"
          endAdornment={
            <IconButton size="xs" aria-label="date">
              <Calendar />
            </IconButton>
          }
        />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          md (default)
        </Text>
        <TextArea
          size="md"
          placeholder="Medium"
          endAdornment={
            <IconButton size="sm" aria-label="date">
              <Calendar />
            </IconButton>
          }
        />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          lg
        </Text>
        <TextArea
          size="lg"
          placeholder="Large"
          endAdornment={
            <IconButton size="md" aria-label="date">
              <Calendar />
            </IconButton>
          }
        />
      </div>
      <div>
        <Text variant="title-sm-medium" mb="8px">
          xl
        </Text>
        <TextArea
          size="xl"
          placeholder="Extra Large"
          endAdornment={
            <IconButton size="lg" aria-label="date">
              <Calendar />
            </IconButton>
          }
        />
      </div>
    </div>
  );

export default TextAreaEndAdornmentSizesExample;

MinMaxRows

코드

Open in Playground

import type { ComponentProps } from 'react';
import { TextArea } from '@mildang/design-system/TextArea';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    placeholder: 'Test min/max rows...',
    maxRows: 5,
  }) } as ComponentProps<typeof TextArea>;

const TextAreaMinMaxRowsExampleRender = (args: ComponentProps<typeof TextArea>) => <TextArea {...args} />;

export default function TextAreaMinMaxRowsExample(props: Partial<ComponentProps<typeof TextArea>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof TextArea>;
  return TextAreaMinMaxRowsExampleRender(mergedProps);
}